2

私はd3.forceを使用してノードをセットアップし、各ノードを接続するリンクを持っています。円をノードとして使用している場合は、すべてうまく機能します。

  var nodes = [{ title: "ABC", group: 1 }, { title: "DEF", group: 1 }, { title: "Blah", group: 1 }];
  var links = [{ source: 0, target: 1 }, { source: 0, target: 2 }];

  var force = d3.layout.force()
    .charge(-120)
    .linkDistance(function(d) {
      console.log(d);
      return 250 * Math.random() + 100;
    })
    .size([r, r]);

  force.links(links)
    .nodes(nodes)
    .start();

  var link = svg.selectAll("line.link")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link")
    .style("stroke-width", 1);

  var node = svg.selectAll("circle.node")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", 15)
    .call(force.drag);

ただし、「g」を使用するようにノードを変更すると、機能しなくなります。

  var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("r", 15)
    .call(force.drag);

  var circle = node.append("circle")
    .attr("fill", function(d) {
      var b = Math.floor(255 * Math.random()),
          rgba = "rgba(0, 0, " + b + ", 0.7)";

      return rgba;
    })
    .attr("r", 15);

円がg要素に追加されているのを見ることができますが、それらは本来あるべき場所ではなく、リンクによって接続されていません。

テキストを追加できるように、ノードとして「g」要素を使用したいと思います。誰かがこれについて何か洞察を持っていますか？

または、「円」要素にテキストを追加する方法がある場合。私もそれを受け入れています。

ありがとう！

4

1 に答える 1

3

これを1つのステートメントに統合して、最後に呼び出しを行ってみてください。

var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .append("circle")
    .attr("fill", function(d) {
       var b = Math.floor(255 * Math.random()),
       rgba = "rgba(0, 0, " + b + ", 0.7)";
       return rgba;
     })
    .attr("r", 15)
    .call(force.drag);

次に、テキストなどの他の要素を添付できます。

于 2012-11-08T04:06:32.223 に答える