在流动数据交互式网络演示中向节点添加标签

Question

我尝试将永久标签（节点名称）添加到Jim共享的交互式网络演示中。 （https://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/）

作为D3和Coffee的新手，尽管花费了大量时间试图理解D3和Coffee脚本，但我无法实现目标。

以下是我试图添加的咖啡脚本：

node.enter().append("text")
.attr("cx", (d) -> d.x)
.attr("cy", (d) -> d.y)
.text("text", (d) -> d.name)

我们非常感谢为实现这一目标提供的一些帮助。

Answer 1

该示例使用D3 v3.x.不幸的是，有一个＆＃34;魔法＆＃34;在v 3.x中，这将阻止您达到您想要的效果（更不用说text没有cx或cy）：

这是node选择，它是数据绑定选择：

node = nodesG.selectAll("circle.node")
.data(curNodesData, (d) -> d.id)

然而，下一行是：

node.enter().append("circle")

这就是有问题的魔法：

enter和append修改数据绑定选择。因此，在此之后，您尝试将文字附加到node，您实际上将text元素附加到circle元素，这将无效！

解决方案：创建SVG组，您可以在其中附加圆圈和文本。