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/