d3.js - 树状布局 - 如何翻转它？

Question

我使用了D3.js树布局这个例子。

http://mbostock.github.com/d3/talk/20111018/tree.html

我需要翻转，所以根节点是在右手边，和链接...等

我怎样才能做到这一点？

Answer 1

• 变化的各节点的偏移量是从右侧而不是从左偏移：

  // Normalize for fixed-depth. 
  nodes.forEach(function(d) { d.y = d.depth * 180; }); 
  

变为：

// Normalize for fixed-depth from right. 
    nodes.forEach(function(d) { d.y = w - (d.depth * 180); }); 

• 更改标签在对面

  nodeEnter.append("svg:text") 
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
      .attr("dy", ".35em") 
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })  
      .text(function(d) { return d.name; }) 
      .style("fill-opacity", 1e-6); 
  

变为：

nodeEnter.append("svg:text") 
     .attr("x", function(d) { return d.children || d._children ? 10 : -10; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "start" : "end"; })  
     .text(function(d) { return d.name; }) 
     .style("fill-opacity", 1e-6); 

• 请在右侧的根节点的原来的位置，而不是左边，这样第一个转变是不奇怪：

  root = json; 
  root.x0 = h/2; 
  root.y0 = 0; 
  

变为：

root = json; 
    root.x0 = h/2; 
    root.y0 = w; 

小提琴：http://jsfiddle.net/Ak5tP/1/embedded/result/