javascript - 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/