2

d3.js を使い始めたばかりで、簡単なデモを正しく動作させることができません。デバッグが難しい: バグがあると、スタック トレースのない d3 の縮小コードでクラッシュすることがよくあります。この場合、エラー コンソールにエラーはまったく出力されません。

このコードを実行すると、すべてのノードが force() によって配置されるのではなく、位置 (0,0) に固定されます。どうしたの？

<html>
<meta charset="UTF-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
$(function() {
    var svg = d3.select('#graph').append('svg').attr('width', 900).attr('height', 900)

    var myNodes = [{name:'a'}, {name:'b'}, {name:'c'}]
    var myLinks = [{source:myNodes[0], target:myNodes[1]}, {source:myNodes[1], target:myNodes[2]}, {source:myNodes[2], target:myNodes[0]}]

    svg.append("text").text("myNodes[0].name=" + myNodes[0].name).attr('y', 50)

    var force = d3.layout.force().charge(-120).linkDistance(30).size([900, 900])

    var link = svg.selectAll("line")
                  .data(myLinks)
                  .enter().append("svg:line");

    var node = svg.selectAll("circle")
                  .data(myNodes)
                  .enter().append("svg:circle")
                  .attr("r", 6)
                  .call(force.drag)

    force.nodes(myNodes).links(myLinks).start()
});
</script>
</head>

<body>
<div id="graph"></div>
</body>
</html>
4

1 に答える 1

3

Forceは、ノードとリンクの x/y 属性の設定を処理するだけです。

... 初期の x 座標と y 座標は、外部で有効な数値にまだ設定されていない場合は、隣接するノードを調べることによって計算されます。

対応する svg シェイプの更新は実際には処理しません。これは通常tick イベントで行います:

tick イベントをリッスンして、ノードの表示位置を更新します

force.on("tick", function() {
  link.attr("x1", function(d) { 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.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});

あなたの例に欠けている他の唯一の部分は、線のスタイルを設定することです。デフォルトでは、ストロークの色がないため、非表示になります。次のように、線に直接色を設定できます。

var link = svg.selectAll("line")
              .data(myLinks)
              .enter().append("svg:line")
              .attr('stroke', 'red')
              .attr('stroke-width', 2)

または、それらの CSS クラスを作成します。

<style>
.link {
  stroke: blue;
  stroke-width: 1.5px;
}
</style>

そして、それらを作成するときにタグを付けます:

var link = svg.selectAll("line")
              .data(myLinks)
              .enter().append("svg:line")
              .attr('class', 'link')
于 2013-07-17T15:31:42.587 に答える