Question

嗨，感谢FernOfTheAndes回答这个问题。我有另一个问题。请参阅下面的FIDDLE和原始问题。

我的问题是，如何在下面的示例中添加文本标签。理想情况下，我希望值显示在矩形中。但是，对于堆叠条形图，过程似乎有所不同，嵌套数组信息似乎没有被拾取。

例如

var dataset = [
[{
    x: 0,
    y: 20 // test with different values
}],
[{
    x: 0,
    y: 30 // test with different values
}],

[{
    x: 0,
    y: 50 // test with different values
}]

];

如何在各自的矩形中显示20,30,50？

感谢有人可以更新FIDDLE或粘贴我需要做的完整代码以添加文本标签。

以下原始代码： D3 Horizontal stacked bar chart axis cut off

FIDDLE：http：// jsfiddle.net/zDkWP /

非常感谢，

Answer 1

这是你需要做的。由于您已经有groups作为节点，因此您只需要使用与矩形相同的比例向其添加text元素。要将文字放在矩形中，您需要在x和y上稍微偏移，特别是在y上。出于演示目的，我通过向其添加20来对y的偏移量进行硬编码，但是您应该为这两个维度使用更智能的偏移。

var text = groups.selectAll("text")
    .data(function (d) {
        return d;
    })
  .enter()
  .append("text")
    .attr("class","text")
    .attr("x", function (d) {
        return xScale(d.y0); // could use an offset here as well...
    })
    .attr("y", 70) // just added 20 as an offset...for demo purposes
    .text(function(d) { return d.y;});

还有一点CSS帮助：

.text {
    fill: white;
}

更新了FIDDLE。

D3将文本标签添加到水平堆叠条形图

1 个答案: