D3向水平堆积条形图添加文本标签

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

小提琴：http:// jsfiddle.net/zDkWP/

非常感谢，

Answer 1

这是您需要做的。由于您已经将 groups 作为节点，您只需使用与矩形相同的比例将 text 元素附加到它们。要将文本放置在矩形内，您需要在x 和y 上进行一点偏移，尤其是在y 上。出于演示目的，我硬编码了 y 的偏移量，将其加 20，但您应该为两个维度使用更智能的偏移量。

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。