d3.js-樹狀布局-如何翻轉它？

Question

我將此示例用於D3.js樹布局。

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

我需要翻轉它，所以根節點在右側，而鏈接...等。

我該如何實現？

Answer 1

• 將每個節點的偏移量更改為從右側而不是從左側偏移：

   // Normalize for fixed-depth. nodes.forEach(function(d) { dy = 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/