D3.js Flip Graph Horizontally

Question

I'm working on a rendering a tree structure very similar to D3's Cluster Dendogram Example.

I need to flip the graph horizontally so the parent nodes are on the right and the children are on the left. The text on the labels cannot be flipped. Which D3 methods are responsible for this?

Code from the example:

var width = 960,
height = 2200;

var cluster = d3.layout.cluster()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40,0)");

d3.json("flare.json", function(error, root) {
    var nodes = cluster.nodes(root),
        links = cluster.links(nodes);

    var link = svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

    var node = svg.selectAll(".node")
        .data(nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

    node.append("circle")
        .attr("r", 4.5);

    node.append("text")
        .attr("dx", function(d) { return d.children ? -8 : 8; })
        .attr("dy", 3)
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .text(function(d) { return d.name; });
});

Take a look at http://stackoverflow.com/questions/20930401/smooth-transitioning-between-tree-cluster-radial-tree-and-radial-cluster-layo for more possibilities on adjusting a hierarchical layout. — VividD, May 27 '14 at 14:25

Lars Kotthoff · Accepted Answer · 2012-11-14T19:44:03.320

1

In this case, the coordinates come from the cluster layout. You can either modify the layout or in the code subtracting .x from the width of the layout, i.e. width - 160. You might also want to adjust the text-anchor attribute value.

edited Nov 14 '12 at 19:44

answered Nov 14 '12 at 17:54

Lars Kotthoff

107,425
16
204
204

Actually, the coordinates are not encoded in the JSON. You can view the JSON here: http://bl.ocks.org/d/4063570/flare.json – agscala Nov 14 '12 at 18:48
Ah, you're right of course. The coordinates come from the layout. I've edited the answer -- the rest is still valid though. – Lars Kotthoff Nov 14 '12 at 19:43

D3.js Flip Graph Horizontally

1 Answers1