如何在D3.js Sankey图中的链接上方和末尾添加文本？

bjp0bcyl 于 12个月前发布在其他

关注(0)|答案(1)|浏览(205)

我目前正在我的可视化中的链接上方添加文本，并希望将其定位在链接的末尾，就在目标节点之前。
这是我给链接添加文本的代码

// Add the link text
var linkText = svg.append("g").selectAll(".link")
                .data(graph.links)
                .enter()
                .append("text").attr('class','linkText')
                .attr("x", function(d) {return d.target.x - 110; })
                .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y) / 2; })
                .attr("dy", ".35em")
                .attr("text-anchor", "end")
                .attr("transform", null)
                .text(function(d) { return "Total : " + d.value + " $"; })
                .attr("text-anchor", "start")

字符串
这是我的代码https://jsfiddle.net/kaowlx/c5z2sy1n/1/
我已经设法添加文本并将其沿着x轴放置，但我仍然面临y轴的挑战。尽管调整了几个值，但我无法在图表上正确放置它。
这是当前结果。

我想要的结果是这样的

的
所以有无论如何，我可以定位的链接上的文字.谢谢.

d3.js

来源：https://stackoverflow.com/questions/75936726/how-to-add-text-above-and-at-the-end-of-the-link-in-d3-js-sankey-diagram

1条答案

按热度按时间

9rbhqvlz1#

使用d.target而不是d.source来基于target垂直放置它：

var linkText = svg.append("g").selectAll(".link")
                    .data(graph.links)
                    .enter()
                    .append("text").attr('class','linkText')
                    .attr("x", function(d) {return d.target.x - 80; })
                    .attr("y", function(d) { return d.target.y - 10; }) // The fix
                    .attr("dy", ".35em")
                    .attr("text-anchor", "end")
                    .attr("transform", null)
                    .text(function(d) { return "Total : " + d.value + " $"; })
                    .attr("text-anchor", "start")

字符串
这是一把小提琴：https://jsfiddle.net/jqc3awsd/5/

赞(0）回复(0）举报 12个月前

我来回答

如何在D3.js Sankey图中的链接上方和末尾添加文本？

1条答案

相关问题

热门标签

最新问答