D3条形图栏文本标签不可见正常

我在d3.js中有一个堆叠条形图对于每个堆叠条，我都有相应的文本值显示堆栈本身附近。问题是，一些文本值显示隐藏在酒吧后面，其中有些酒吧是可见的。我希望所有文字在我的酒吧中都可见。我的代码看起来像，D3条形图栏文本标签不可见正常

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

来源

2015-06-16 Nagendra Somayaji

提供一个例子，请（例如上的jsfiddle）。 – kashesandr

条形图和文本在小提琴 – Roshan

现在检查Roshan –

基本上与z-索引有关的问题。但是SVG没有z索引，所以可以通过重新排序元素来解决。这里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的正确顺序。

尝试http://jsfiddle.net/kashesandr/z90aywdj/

来源

2015-06-16 11:38:24 kashesandr

我已经尝试过它..仍然是同样的问题。 –

我已经尝试过了..它在许多标签中工作，一到两个仍然像以前一样，不完全可见 –

好吧，基本上就是我之前写的z-index中的问题（请参阅这里的评论http://stackoverflow.com/questions/482115 /使用JavaScript的-可以-I-变化最z索引层-的-AN-SVG-G-元件/ 482147＃482147）。所以，我们必须改变元素的顺序来支持你所需要的。 – kashesandr

D3条形图栏文本标签不可见正常

回答

相关问题