Question

请参阅

bl.ocks.org/rkirsling/5001347

单击画布中的任意位置。它创建一个新节点。将鼠标从一个节点拖到另一个节点。它在节点之间创建一个箭头。我希望在创建箭头后，文本应显示为箭头的标签。文本应仅附加到该箭头。在那里和哪里添加什么代码？

请参阅示例中的以下代码行（bl.ocks.org/rkirsling/5001347）我提到：

link = {source: source, target: target, left: false, right: false};
    link[direction] = true;
    links.push(link);

在此之后，我添加了以下内容

linkLabels = svg.selectAll("link").data(links).enter()
    .append("text")
.attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; })
    .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })
.text(function(d) {return (d.source.id + "-" + d.target.id);});

它附加文本，但问题是每次创建链接时，它都会将文本附加到该链接以及所有其他链接。因此，文本会多次附加到许多链接。我希望文本只应附加到刚刚创建的链接。怎么做？我甚至用“.link”替换了“link”，但现在没有显示任何文字。

Answer 1

linkLabels = svg.selectAll("link").data(links).enter()

您确定要为<link>元素计算数据连接吗？这些用于样式表等。也许你的意思是svg <line>？还是.link课程？

如果它不是那么简单，可能是你调用.data（），它返回所有新的数据连接。尝试将键函数作为第二个参数传递给.data（），以匹配数据和元素最初匹配的方式。像下面这样简单的事情可能会这样做：

通过不传入此函数，您将所有数据按索引与元素配对，这与此相同：

   .data(force.links(), function(d, i) { return i })

您现有的联接可能已经以某种方式匹配，而不是索引。

D3.js API - selection.data()

d3图：如何仅将文本附加到给定链接

1 个答案: