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

嗨，谢谢费尔诺夫特汉德斯回答这个问题。我还有一个问题。请看下面的小提琴和原始问题

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

比如说

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:http:// jsfiddle.net/zDkWP/

---

非常感谢，

以下是您需要做的事情。由于已经有

组

作为节点，因此只需使用与矩形相同的比例向它们添加

文本

元素。要将文本放置在矩形中，您需要在

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;
}

---

更新。

再次感谢您的支持！我也尝试过类似的方法，但在三个方面都失败了。在.data（）中，我输入了.data（数据集），假设它正在调用数据集。我很难理解为什么在.data属性中需要函数，因为您只调用数据集，而从.text属性中选择值。2.我没有创建名为text的新变量，但尝试附加组。selectAll（“text”）。如何创建新的变量文本自动执行d3？必须分组吗？最后是3。将我的代码放在callAxis位之后。不确定这是否有什么不同。我每天都在学习更多！干杯。对于第2项，确实不需要创建文本变量，因为我们没有在其他任何地方使用它，您只需执行

组。选择All（“text”）…

。对于第3项，顺序没有区别，因为这两段代码之间没有依赖关系。对于第1项，我无法解释得比…更好，但请阅读整页…非常有启发性。