CODEWITHSUNDEEP
javascriptcanvasd3.js
agscala
agscala

Reputation: 3865

D3.js Flip Graph Horizontally

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; });
});

Upvotes: 1

Views: 1869

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109262

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.

Upvotes: 1

Related Questions