时间戳

首页 > 解决方案 > 如何在 d3 动态图表中移动标签的位置

javascript - 如何在 d3 动态图表中移动标签的位置

问题描述

我可以使用下面的代码从 csv 文件中添加标签，但是 csv 每一行的文本是相互重叠的，你知道如何移动它以使其看起来更好吗？

  svg.selectAll(".labels")
              .data(data)
              .enter().append("text")
              .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
              .attr("dy", ".70em")
              .text(function(d) { return d.TrackName; })
              .attr("fill", function(d, i) { return color(i); });

标签： javascriptd3.jslabel

解决方案

当你对数据进行连接时，你可以访问datum你已经在你的attr函数中演示过的。但是，它还提供了一个index您可以用作第二个参数的参数。

改变你的

.attr("dy", ".70em")

更像这样的东西。这样做是将 0.7 乘以每个项目的索引，生成它们的列表。您可能需要根据其外观调整数字。

.attr("dy", (d, i) => `${i * 0.7}em`);

推荐阅读