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

【问题标题】：Adding labels to nodes in Flowing Data Interactive Network Demo在流动数据交互式网络演示中为节点添加标签
【发布时间】：2016-12-15 17:35:04
【问题描述】：

我尝试将永久标签（节点名称）添加到 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)

我们将不胜感激。

【问题讨论】：

【解决方案1】：

该示例使用 D3 v3.x。不幸的是，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 组，您可以在其中添加圆圈和文本。

【讨论】：