3

我正在尝试通过向每个节点添加特定标签（SVG 文本）来修改此 D3.js 示例（动态节点链接树），但未成功。

如果我理解正确，在简要查看 SVG 规范和 D3 文档之后，最好的方法是创建 SVG 组并移动它们。

不幸的是，这不起作用，因为转换对组没有影响。有没有我不知道的简单（r）方式？

非常感谢。

4

1 回答 1

4

如果您正在寻找一种为文本标签切换圆圈的效果，您可以执行以下操作：

// 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/

编辑

但是，如果您希望在圆圈旁边添加标签，我不建议svg:g在这种情况下使用，因为这样您就必须使用transforms 来移动组。相反，只需在更新函数中将圆形节点和文本节点加倍：

  // 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/

于 2012-11-11T01:36:39.317 回答