javascript - 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

这是因为绑定(bind)到您添加的文本的数据不正确。

如果您按如下方式添加 console.log，您将能够看到标签未插入的原因。检查控制台中的输出。 Console log fiddle

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

一种方法是将文本附加到条形组(在您的情况下为“切片”)。就像你在酒吧做的那样。这是一个 fiddle 这样做: 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属性可根据需求调整)

这是最后的 fiddle : JS FIDDLE

我对每个转换使用“end”回调并相应地更改文本值。

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

希望这有帮助。 :)如果代码的任何部分无法理解，请告诉我。