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

I have two questions.

我有两个问题。

I want to add data labels to a stacked bar chart.
I try to change the Code of this Example StackedBarChart, but I am not able to add data labels.

我想将数据标签添加到堆积条形图中。我尝试更改此示例StackedBarChart的代码,但我无法添加数据标签。

if the labels are added I need to prevent overlapping. I hope I can do this like John Williams in his blog for pie charts www.safaribooksonline.com/blog/2014/03/11/solving-d3-label-placement-constraint-relaxing/ or with the d3 extension D3-Labeler //tinker10.github.io/D3-Labeler/.

如果添加标签,我需要防止重叠。我希望我可以像约翰·威廉姆斯一样在他的博客中找到饼图www.safaribooksonline.com/blog/2014/03/11/solving-d3-label-placement-constraint-relaxing/或d3扩展名D3-Labeler / /tinker10.github.io/D3-Labeler/。

I found this jsfiddle http://jsfiddle.net/3a5Wk/1/ code and I am very grateful if you can also put the answers in a jsfiddle or explain your code in more detail as I am just starting on d3-Charts.

我找到了这个jsfiddle http://jsfiddle.net/3a5Wk/1/代码,如果您还可以将答案放在jsfiddle中或者更详细地解释您的代码,我将非常感激,因为我刚开始使用d3-Charts。

1 个解决方案

#1

I have solved the issue of the first question by adding the Label code. I have added:

我已经通过添加Label代码解决了第一个问题的问题。我已经添加了:

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);});

Now I still got the Problem that the labels overlap.
How can I change the position of the labels in a way that they don't overlap?

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

#1