我在d3.js中有一个堆积条形图 对于每个堆叠的条形,我都有相应的文本值显示靠近堆栈本身。 问题是,显示的某些文本值隐藏在条形图后面,而某些文本值在条形图上可见。我想要在我的酒吧上看到所有文字。我的代码看起来像,
bar.append("text")
.attr("x", function (d) { return x(d.x); })
.attr("y", function (d) { return y(d.y0 + d.y); })
.attr("dy", ".35em")
.attr('style', 'font-size:13px')
.text(function (d) { if (d.y != 0) { return "$" + d.y; } })
.style('fill', 'black');
答案 0 :(得分:1)
基本上是与z-index相关的问题。但是SVG没有z-index,因此可以通过重新排序元素来修复它。详情请With JavaScript, can I change the Z index/layer of an SVG <g> element?
最简单,最快捷的方式:
将.reverse()
添加到数据集。
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset.reverse())
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i]; });
更好的方法
为条形和标签添加不同的容器,并在DOM中按正确顺序放置。