Question

我在将文本定位到所需位置时遇到麻烦，我希望与该栏相对应的数字出现在顶部栏内。为此，我正在操纵我认为应该建议为text-anchor的{{1}}，对吗？即使以其他方式，我也无法获得想要的东西。

center

        var w = 450;
        var h = 200;

        var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .attr("fill", "#black");

        var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18,
17, 16, 18, 23, 25];
        var rects = svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", 22)
            .attr("height", 100);
   
        rects.attr("x", function (d, i) {
            return i * (w / dataset.length);
        });

        rects.attr("y", function(d,i){
            return h - (d * 4);
        });

        rects.attr("fill", function(d,i){
            return "rgb(0,0," + (d * 10) + ")";
        });

        svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .attr("fill", "green")
        .text(function (d) {
        return d;
        })
        .attr("text-anchor","center")
        .attr("x", function (d, i) {
        return i * (w / dataset.length)-1;
        })
        .attr("y", function (d) {
        return h - (d * 4)-1;
        });

Answer 1

一种实现方法可能是使用

.attr('transform', 'translate(0,<height_of_text>)')

其中<height_of_text>会将文本向下发送指定的数量。要使用实际的文字高度，可以在

的返回值中使用一些东西

svg.selectAll("text").node().getBoundingClientRect().height

我不知道文本锚中的标志可以直接做到这一点。

文字锚点未出现在D3中

1 个答案: