使用d3.js将标签与条形图对齐

Question

我正在尝试配置条形图，但在标记rect元素本身时遇到了问题。这是我目前所拥有的和我得到的输出：

svg.selectAll("svg")
            .data(chartData)
            .enter()
            .append("text")
            .text(function (d) {
                return d.value;
            })
            .attr("x", function (d, i) {
                return i * (width / chartData.length) + (width / chartData.length / 2);
            })
            .attr("y", function (d) {
                return Math.min(450, height - (d.value * 6) + 30);
            })
            .attr("class", "bar-chart-label");

输出：

注意滴答声是如何排列的。我究竟做错了什么？我也试过切换text-anchor: middle CSS标签，虽然它改变了一些东西但它并没有真正解决问题。

提前致谢。

编辑：我添加了一个jsbin示例来展示我正在做的事情：http://jsbin.com/cugozihadi/edit?js,output。

Answer 1

所以这就是问题所在。在这种情况下，您不会将文本添加到矩形中，而是直接将其添加到svg元素中。你应该做的是：

1. 创建SVG元素。 （我不确定你为什么要做svg.selectAll（＆＃34; svg＆＃34;）因为在svg中选择了svg ...你不应该这样做）
2. 向其附加标签（字面意思是组标签）。
3. 将矩形和文本添加到这些组中。
4. 将轴和其他信息添加到图表中。

在这里看一个非常基本的例子：https://bl.ocks.org/mbostock/3885304希望这有帮助！