javascript - SVG 動的ツリーでノードにラベルを付けるための最適なソリューション (D3.js を使用)

Question

各ノードに特定のラベル (SVG テキスト) を追加して、この D3.js の例 ( Dynamic Node-Link Tree ) を変更しようとしていますが、失敗しました。

私の理解が正しければ、SVG の仕様と D3 のドキュメントを簡単に調べた後、SVG グループを作成して移動するのが最善の方法です。

残念ながら、トランジションはグループに影響を与えないため、これは機能しません。私が気付いていない簡単な（r）方法はありますか？

どうもありがとう。

Answer 1

テキスト ラベルの円を切り替える効果を探している場合は、次の操作を実行できます。

// Enter any new nodes at the parent's previous position.
node.enter().append("svg:text")
    .attr("class", "node")
    .attr("x", function(d) { return d.parent.data.x0; })
    .attr("y", function(d) { return d.parent.data.y0; })
    .attr("text-anchor", "middle")
    .text(function(d) { return "Node "+(nodeCount++); })
  .transition()
    .duration(duration)
    .attr("x", x)
    .attr("y", y);

ここでフィドルを参照してください：http://jsfiddle.net/mccannf/pcwMa/4/

編集

ただし、円の横にラベルを追加する場合は、グループを移動するために s をsvg:g使用する必要があるため、この場合の使用はお勧めしません。transform代わりに、更新関数で次のように、円ノードとテキスト ノードを 2 倍にするだけです。

  // Update the nodes…
  var cnode = vis.selectAll("circle.node")
        .data(nodes, nodeId);

  cnode.enter().append("svg:circle")
        .attr("class", "node")
        .attr("r", 3.5)
        .attr("cx", function(d) { return d.parent.data.x0; })
        .attr("cy", function(d) { return d.parent.data.y0; })
      .transition()
        .duration(duration)
        .attr("cx", x)
        .attr("cy", y);

  var tnode = vis.selectAll("text.node")
        .data(nodes, nodeId);

  tnode.enter().append("svg:text")
        .attr("class", "node")
        .text(function(d) { return "Node "+(nodeCount++); })
        .attr("x", function(d) { return d.parent.data.x0; })
        .attr("y", function(d) { return d.parent.data.y0; })
      .transition()
        .duration(duration)
        .attr("x", x)
        .attr("y", y);

  // Transition nodes to their new position.
  cnode.transition()
      .duration(duration)
      .attr("cx", x)
      .attr("cy", y);

  tnode.transition()
      .duration(duration)
      .attr("x", x)
      .attr("y", y)
      .attr("dx", 4) 
      .attr("dy", 4); //padding-left and padding-top

これを示すフィドルは、http: //jsfiddle.net/mccannf/8ny7w/19/にあります。