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

希望这可以帮助。 :)让我知道代码的任何部分是否无法理解。