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/

修改

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

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

SVG动态树中标签节点的最佳解决方案（使用D3.js）

1 个答案: