分组图表条上的d3条标签 [英] d3 bar label on grouped chart bar

问题描述

我使用此示例- 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 + ")";
        })

但是文本元素追加到内部rect元素上，并且它是不可见的:

<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 ... 也仅选择了组.有什么想法可以将示例中的文本元素附加到栏吗?

解决方案

看看您的屏幕截图，translate属性包含function u(n).....变量y是一个函数，而不是rect Y坐标的值.为此，您需要d3.select(this).attr("y").但是后来我也用y(d.value)看到了文字，但是那是等效的.

您必须像rects一样添加文本.

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

文本尚未设置动画，请使用与rect Y坐标相同的动画代码.或在rect动画的末尾创建文本.

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

Im using this example - https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad

and trying to add adittional infromation on the bars.

I tried:

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

But text elements appends to inner rect element and it is not visible:

<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... selects only groups unfortunately too. Any ideas how to append text element on this example to bars?

解决方案

Have a look at your screenshot, the translate attribute contains function u(n)..... The variable y is a function not the value of the rect Y-coord. To get that you need d3.select(this).attr("y"). But then the text is also not visible I used y(d.value) but that is equivalent.

You have to add the texts just like the rects.

This you need to add to the d3v5 code I posted in https://stackoverflow.com/a/51573685/9938317

The text does not animate yet, use the same animation code as for the rect Y-coord. Or create the text at the end of the rect animation.

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

这篇关于分组图表条上的d3条标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！