javascript - 分组图表栏上的 d3 栏标签

Question

我正在使用这个例子 - https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad

并尝试在栏上添加其他信息。

我尝试过:

    slice.selectAll("rect").append("text")
        .attr("class", 'bar-text')
        .attr("fill", "#000")
        .text(function (d) {
            return d.total;
        })
        .attr("transform", function (d, i) {
            var x0 = x1.rangeBand() * i + 11,
                y0 = y + 8;
            return "translate(" + x0 + "," + y0 + ")";
        })

但是文本元素附加到内部矩形元素并且它不可见:

<g class="g" transform="translate(46,0)">
    <rect width="101" x="2" style="fill: rgb(8, 81, 156);" y="150.00000000000003" height="300">
        <text class="bar-text" fill="#000" transform="translate(11,function u(n){return o(n)}8)"></text>
    </rect>
    <rect width="101" x
    ...

slice.append... 不幸的是也只​​选择组。有什么想法如何将此示例中的文本元素附加到条形图上吗？

Answer 1

看看你的屏幕截图，translate 属性包含function u(n)....。变量 y 是一个函数，而不是矩形 Y 坐标的值。为此，您需要d3.select(this).attr("y")。但随后文本也不可见，我使用了 y(d.value) ，但这是等效的。

您必须像添加矩形一样添加文本。

您需要将其添加到我在 https://stackoverflow.com/a/51573685/9938317 中发布的 d3v5 代码中

文本还没有动画，请使用与矩形 Y 坐标相同的动画代码。或者在矩形动画的末尾创建文本。

slice.selectAll("text")
      .data(function(d) { return d.values; })
    .enter().append("text")
        .attr("class", 'bar-text')
        .attr("fill", "#000")
        .attr("text-anchor", "middle")
        .text(function (d) { return d.value; })
        .attr("x", function (d, i) { return x1.bandwidth() * (i+0.5); })
        .attr("y", function (d, i) { return y(d.value) + 8; });