javascript - 使用 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("svg") 因为它会在 svg 中选择 svg...你不应该这样做)
2. 为其附加标签(字面意思是组标签)。
3. 将矩形和文本添加到这些组中。
4. 向图表添加坐标轴和其他信息。

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