Javascript D3条形图条形文本标签不正确可见

我在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');

---

基本上，这个问题与z指数有关。但是SVG没有z索引，所以可以通过对元素重新排序来修复它。这里的细节

最简单、最快的方法：

将

.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中按正确的顺序放置它们

---

试一试

请提供一个例子（例如在JSFIDLE上）。提琴中的条形图和文本在哪里？我已经试过了。。它在许多标签中工作，一两个仍然像以前一样，不完全可见好的，基本上是我以前写的z-index中的问题（参见这里的评论）。因此，这里我们必须更改元素的顺序以支持您所需的内容。今天我将尝试对它们重新排序，但不确定是否有足够的时间。你自己试试看。