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

Question

I have two questions.

1. 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.
2. 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/ .

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.

Answer 1

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

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?