2016-02-04 39 views
0

我有兩個問題。D3 Stacked Bar Chart添加數據標籤並解決D3標籤放置

  1. 我想將數據標籤添加到堆疊條形圖中。
    我嘗試更改此示例的代碼StackedBarChart,但我無法添加數據標籤。
  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-圖表。

回答

0

我已經通過添加標籤代碼解決了第一個問題。我添加了:

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

現在我仍然遇到標籤重疊的問題。
如何以不重疊的方式更改標籤的位置?