Question

我试图根据此处显示的示例创建一个Sankey图表：https://bost.ocks.org/mike/sankey/

虽然我能够重新创建图表，但我希望将工具提示文本直接写入链接本身（因此它们可以作为静态图像读取）。我尝试在链接中添加.append("text")调用，就像我为节点所做的那样，但它似乎并没有起作用。以下是我在上面的示例中添加的代码：

link.append("text")
    .attr("x", 25)
    .attr("y", function(d) { return d.dy / 2; })
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .attr("transform", null)
    .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
    .attr("text-anchor", "start");

然而，这并未显示图中的任何内容。

更新：我将Mike Bostock的代码粘贴到一个要点，以便更轻松地重现问题：http://bl.ocks.org/almsuarez/50eab68a645d7fc12183384000ea8c82

Answer 1

正如评论中所说，您无法将文字附加到SVG元素。所以说你现在将链接附加到容器。例如：

var link = container.append('path')....//and so on

你必须对文字做同样的事情。所以，例如：

var linkText = container.append('text')

你说你不能跟踪x和y位置吗？

基本上，当您的链接位于两点之间时，您需要找到中心。我将如何做到这一点：

.attr("x", function(d) { console.log(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; })

所以你得到了消息来源＆＃39;然后x位置加上targetX - sourceX的差异的一半，并为y做同样的事情。

我已经把它放在一个小提琴中供您查看：https://jsfiddle.net/thatOneGuy/8ayq5nwa/2/

您可以将鼠标悬停在链接上以查看标题，以便检查它是否正确：）

在d3.js sankey图表中的链接中添加文本

1 个答案: