使用d3.js將標籤對齊到條形圖

我正在嘗試配置條形圖，但在標記rect元素本身時遇到問題。以下是我目前擁有和輸出我得到：使用d3.js將標籤對齊到條形圖

svg.selectAll("svg") 
      .data(chartData) 
      .enter() 
      .append("text") 
      .text(function (d) { 
       return d.value; 
      }) 
      .attr("x", function (d, i) { 
       return i * (width/chartData.length) + (width/chartData.length/2); 
      }) 
      .attr("y", function (d) { 
       return Math.min(450, height - (d.value * 6) + 30); 
      }) 
      .attr("class", "bar-chart-label");

輸出：

注意如何蜱不用排隊。我究竟做錯了什麼？我也試過切換text-anchor: middle CSS標籤，雖然它改變了事情，但它並不能真正解決問題。

在此先感謝。

編輯：我添加了一個jsbin的例子來顯示我在做什麼：http://jsbin.com/cugozihadi/edit?js,output。

來源

2016-07-05 awh112

最讓我感到困惑的是，他們最初是如何到達酒吧的左邊，然後最終到達他們的右邊。 – awh112

所以問題在這裏。在這種情況下，您不會將文本添加到矩形中，而是直接將其添加到svg元素。你應該做的是：

創建SVG元素。（我不知道你爲什麼要做svg.selectAll（「svg」），因爲它選擇了svg內的svg ...你不應該這樣做）
追加標籤（實際上是組標籤）。
將矩形和文本添加到這些組。
將座標軸和其他信息添加到圖表。

看一個非常基本的例子：https://bl.ocks.org/mbostock/3885304希望這會有所幫助！

來源

2016-07-05 14:29:16 ivanempire

感謝您回覆@ivanempire。我可能會做一些有點不同的事情......我編寫了一個簡單的jsbin示例來向您展示我如何執行此操作：http://jsbin.com/cugozihadi/edit?js,output。看看那裏，看看這是否更有意義。 – awh112

明白了吧，行'svg.selectAll（「svg」）'是什麼導致了問題。我做了一個快速的例子，說明如何添加組並將文本放到這裏：http://jsbin.com/farutoxasa/edit?js,output編輯1：廢話我按了意外輸入。檢查SVG以查看文本和條形如何分組。 – ivanempire

使用d3.js將標籤對齊到條形圖

回答

相關問題