[英]d3 bar label on grouped chart bar
Im using this example - https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad 我正在使用此示例-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: 但是文本元素追加到内部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... selects only groups unfortunately too. slice.append ...不幸的是,它也仅选择组。 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)....
. 看一下您的屏幕截图,
translate
属性包含function u(n)....
The variable y is a function not the value of the rect Y-coord. 变量y是一个函数,而不是rect Y坐标的值。 To get that you need
d3.select(this).attr("y")
. 要获得它,您需要
d3.select(this).attr("y")
。 But then the text is also not visible I used y(d.value)
but that is equivalent. 但是然后文本也不可见,我用了
y(d.value)
但那是等效的。
You have to add the texts just like the rects. 您必须像rects一样添加文本。
This you need to add to the d3v5 code I posted in https://stackoverflow.com/a/51573685/9938317 这需要添加到我在https://stackoverflow.com/a/51573685/9938317中发布的d3v5代码中
The text does not animate yet, use the same animation code as for the rect Y-coord. 文本尚未设置动画,请使用与rect Y坐标相同的动画代码。 Or create the text at the end of the rect animation.
或在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; });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.