2

ばかげた質問かもしれませんが、私は d3 初心者です。ソース リンクの重みに基づいて、フォース レイアウトで円の半径を変更しようとしています。tick 関数内で d.source.weight にアクセスできるのに、他の場所ではアクセスできないのはなぜですか?

例えば

force.on("tick", function() {
    link.attr("x1", function(d) {console.log(d.source.name + " " + d.source.weight; return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

コンソールに正しい値を返しますが、円を追加するときにこれらのプロパティにアクセスできないのはなぜですか?

node.append("circle")
     .attr("class", "node")
     .attr("r", function(d) {return d.source.weight * 2;});  // breaks

これはd3の質問というよりも基本的なjavascriptの質問のように感じますが、あまり助けが見つかりません. どんな助けでも大歓迎です。

4

2 に答える 2

1 
node.append("circle")
     .attr("class", "node")
     .attr("r", function(d) {return d.weight * 2;});  // breaks

この場合、リンクではなく function(d){...} でノードを操作している「.source」を削除するだけです。

于 2014-01-15T07:15:07.940 に答える
1

tick 関数は、設定したときに何が起こるかを変更していません.attr("r", ect )。設定内容を変更しています：

リンク

link.attr("x1", function(d) {console.log(d.source.name + " " + d.source.weight; return d.source.x; })

ノード

  node.append("circle")
 .attr("class", "node")
 .attr("r", function(d) {return d.source.weight * 2;});  // breaks

この例に取り組んでいると思います。APIを参照しながらソースの 38 ～ 69 行を読むと、ノードがどのように異なるかを理解できます。ただし、それはトリッキーで、一種のスローグになる可能性があります。この例でコンソールを開いて少し遊んで、何が起こっているのかをよりよく理解することをお勧めします。

これらのコマンドのいくつかを試すことをお勧めします (クロムを使用すると、オブジェクトを簡単に調べて、ノードとリンクに接続されたデータの属性を確認することもできます)。

node.attr("r", function(d){ return 8; })
node.attr("r", function(d){ return d.weight; })

link.attr("class", "")
link.attr("stroke", "yellow")
于 2013-06-13T01:25:28.600 に答える