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，您将能够看到标签未插入的原因。检查控制台中的输出。 Console log fiddle

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

一种方法是将文本附加到酒吧组（＆＃34;切片＆＃34;在您的情况下）。就像你为酒吧做的那样。这是一个小提琴： 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

我正在使用＆＃34;结束＆＃34;回调每次转换并相应地更改文本值。

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

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

d3 y轴标签位置

1 个答案: