9

私はd3.js（および一般的なSVG）に非常に慣れていないので、簡単なことをしたいと思っています。つまり、角度の付いたコネクタを持つツリー/デンドログラムです。

ここから d3 の例を共食いしました: http://mbostock.github.com/d3/ex/cluster.html そして、ここの protovis の例のようにしたいです:

私はここから始めました: http://jsbin.com/ugacud/2/edit#javascript,htmlそして、間違っているのは次のスニペットだと思います:

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

ただし、明らかな代替品はありません。使用できますd3.svg.lineが、それを適切に統合する方法がわかりません。理想的にはエルボーコネクタが必要です....私が見た d3 の例の多くは、ツリーの代わりにオブジェクトのグラフを作成するために重力を使用しています。

4

1 に答える 1

26

diagonalSVG の「H」および「V」パス コマンドを使用して、関数をカスタム パス ジェネレーターに置き換えます。

function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + d.target.y;
}

ソースとターゲットの座標 ( xとy ) が入れ替わっていることに注意してください。この例ではレイアウトを水平方向に表示しますが、レイアウトは常に同じ座標系を使用します。xは木の幅、yは木の深さです。したがって、葉 (一番下) のノードが右端にあるツリーを表示する場合は、xとyを交換する必要があります。それが対角線の射影関数の機能ですが、上記のエルボーの実装では、構成可能な関数を使用するのではなく、動作をハードコードしただけです。

次のように:

svg.selectAll("path.link")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", elbow);

そして実際の例：

于 2012-04-20T16:10:47.030 に答える