d3 y軸標簽位置

Question

我有一個分組的條形圖設計，每個條形圖的數量緊接在條形上方，而不是最左側的y軸條形圖。

我添加了這樣的文字...

svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class","label")
  .attr("x", function(d) { return x1(d.rate) })
  //.attr("y", function(d) { return y(d.value) + 1; })
.attr("dy", ".75em")
.text(function(d) {return d.value; });

但是我似乎無法根據條形圖位置獲得x和y值，並且未插入d.value的實際文本。

此處的示例： https : //jsfiddle.net/6p7hmef1/7/

Answer 1

這是因為綁定到您要添加的文本的數據不正確。

如果按如下所示添加console.log，您將能夠查看為什么未插入標簽。 在控制台中檢查輸出。 控制台日志小提琴

.text(function(d) {console.log(d); return d.value; });

一種方法是將文本附加到欄組（在您的情況下為“切片”）。 就像您為酒吧所做的一樣。 這是一個小提琴： JS Fiddle Demo

    slice.selectAll(".text")
    .data(function(d) { return d.values; })
    .enter()
    .append("text")
    .attr("class","label");
  slice.selectAll('text.label')
    .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
    .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
    .text(function(d) {return d.value; });

這可能看起來很奇怪，因為在過渡欄之前顯示了文本。 因此，在顯示條形之后更改文本的值似乎對我來說是正確的方法。 （可以根據要求調整dx和dy屬性）

這是最后的小提琴 ： JS FIDDLE

我在每次轉換時都使用“結束”回調，並相應地更改了文本值。

.each('end', function () {
    d3.select(this.parentNode).selectAll('text.label')
        .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
        .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
        .text(function(d) {return d.value; });
})

希望這可以幫助。 :)讓我知道代碼的任何部分是否無法理解。