D3堆积条形图添加数据标签并解决D3标签放置问题

D3 Stacked Bar Chart add Data Labels and solving D3 Label Placement

本文关键字：D3 标签 解决 问题 数据 条形图 添加      更新时间：2023-09-26

我有两个问题。

  1. 我想将数据标签添加到堆积条形图。
    我尝试更改此示例堆叠条形图的代码，但无法添加数据标签。
  2. 如果添加了标签，我需要防止重叠。我希望我能像约翰·威廉姆斯在他的博客中那样做饼图 www.safaribooksonline.com/blog/2014/03/11/solving-d3-label-placement-constraint-relaxing/或使用 d3 扩展名 D3-Labeler//tinker10.github.io/D3-Labeler/。

我发现这个jsfiddle http://jsfiddle.net/3a5Wk/1/代码，如果您也可以将答案放在jsfiddle中或更详细地解释您的代码，我将不胜感激，因为我刚刚开始使用d3图表。

我已经通过添加标签代码解决了第一个问题的问题。我补充了： 

var dataText = svg.selectAll(".dtext")  
.data(layers)
.enter().append("g")
 .attr("class", "g")

 dataText.selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("text")
  .attr("x", function(d) { return x(d.x) +18; })
  .attr("y", function(d) { return y(d.y + d.y0) +10; })
  .style("text-anchor", "middle")
  .style("font-size", "10px")
  .style("color", "white")
  .text(function (d) {return (d.y);});

现在我仍然遇到标签重叠的问题。
如何以不重叠的方式更改标签的位置？

相关文章：