0

簡単なツリー レイアウトの例があります。ソース ノードとターゲット ノードに値を設定したい

データは次のようになります。

   var Data = {"name" : "A", "info" : "tst", "childrens" : [
      {"name" : "A1", x:100, y:100 },
      {"name" : "A2", x:50, y:400 },
      {"name" : "A3", x:50, y:100 },
      {"name" : "A311", x:350, y:120 },
      {"name" : "A312", x:250, y:170 },
      {"name" : "A312", x:175, y:200 }

    ]};

ご覧のとおり、各ノードに x と y の値を定義して、必要な場所に配置しました。

ただし、レイアウトにはまったく影響がないようです。

投影を次のように変更しようとしました:

            translate(" + d.x + "," + d.y + ")"

また、ノード変数を変更しようとしましたが、プロジェクションで変更した場合と同じ影響があるようです。

treelayout を使用して位置を設定できるかどうか疑問に思っていますが、許可されていません。

また、svg:circle を使用する代わりに、svg.symbol を使用したいと考えています。

   node.append("path")
       .attr("d", d3.svg.symbol().type(circle))
       .attr("transform", "translate(0,0)")

ただし、代わりに、テキストなしで行だけを表示します-理由がわかりません。

したがって、基本的に、選択した場所に子とルートを配置しようとしました。

どんな助けやアドバイスも大歓迎です。 http://jsfiddle.net/3twUr/2/

編集：

var line = d3.svg.diagonal().data(data).enter()

    .source({x: d.x, y: d.y})
    .target({x: d.x, y: d.y});

    svg.append("path")
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("d", line);

     var pos = [{source: "A" ,target: 'A1'},
                {source: "A" , target: 'A2'} ];
4

1 に答える 1

1

ツリー レイアウト (および他のほとんどのレイアウト) の要点は、ノードの位置を自動的に決定することです。あなたがやろうとしていることは、まったくサポートされていません。

ノードの位置が既にあることを考えると、シンボルとラインを配置したい場所に配置するだけで、はるかに簡単になるように思えます。つまり、次のようなものです

svg.selectAll("circle").data(Data.childrens)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; });

リンクについても同様に、自分で計算する必要があります。親ノードをその子ノードにリンクしたいように聞こえるので、これは比較的簡単です。

このアプローチには、任意のノード/リンク スタイルを自由に使用できるという利点もあります。

于 2013-04-23T20:57:57.877 に答える