javascript - D3 - 在 D3 中制作的 SVG 上将标签居中的问题

Question

我不太明白如何将标签居中放置在我的 d3 图表的左侧。我已经看到解决方案是 text-anchor: middle 但这在我的情况下不起作用，我不太确定为什么。

这是构建 SVG 的 D3 Javascript:

function buildSvg(data) {
    var margin = {
            top: 50,
            right: 20,
            bottom: 10,
            left: 150
        },
        width = $('.figure').width() - (margin.left + margin.right),
        height = 50 * data.length;

    var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.3);

    var x = d3.scale.linear()
    .rangeRound([0, width]);

    var color = d3.scale.ordinal()
    .range(['#9ADF2B', '#ef473a', '#ECECEC']);

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

    var svg = d3.select(element[0]).append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height)
    .attr('class', 'd3-plot')
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + 0 + ')');

    color.domain(['Correct', 'Incorrect', 'To complete']);

    data.forEach(function (d) {
        // Creates the percentages
        d['Correct'] = +d[1] * 100 / d.N;
        d['Incorrect'] = +d[2] * 100 / d.N;
        d['To complete'] = +d[3] * 100 / d.N;

        // Changes the starting point.
        var x0 = 0;
        var idx = 0;

        d.boxes = color.domain().map(
            function (name) {
                return {
                    name: name,
                    x0: x0,
                    x1: x0 += +d[name],
                    N: +d.N,
                    n: +d[idx += 1]
                };
            }
        );
    });

    var min_val = d3.min(data, function (d) {
        return d.boxes['0'].x0;
    });

    var max_val = d3.max(data, function (d) {
        return d.boxes['2'].x1;
    });

    x.domain([min_val, max_val]).nice();
    y.domain(data.map(function (d) {
        return d.Question;
    }));

    svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis);

    var vakken = svg.selectAll('.question')
    .data(data)
    .enter().append('g')
    .attr('class', 'bar')
    .attr('transform', function (d) {
        return 'translate(10,' + y(d.Question) + ')';
    });

    var bars = vakken.selectAll('rect')
    .data(function (d) {
        return d.boxes;
    })
    .enter().append('g').attr('class', 'subbar');

    bars.append('rect')
    .attr('height', y.rangeBand())
    .attr('x', function (d) {
        return x(d.x0);
    })
    .attr('width', function (d) {
        return x(d.x1) - x(d.x0);
    })
    .style('fill', function (d) {
        return color(d.name);
    });

    bars.append('text')
    .attr('x', function (d) {
        return x(d.x0);
    })
    .attr('y', y.rangeBand() / 2)
    .attr('dy', '0.5em')
    .attr('dx', '0.5em')
    .style('font', '10px sans-serif')
    .attr('text-anchor', 'start')
    .text(function (d) {
        return d.n !== 0 && (d.x1 - d.x0) > 3 ? d.n : '';
    });

    vakken.insert('rect', ':first-child')
    .attr('height', y.rangeBand())
    .attr('x', '1')
    .attr('width', width)
    .attr('fill-opacity', '0.5')
    .style('fill', '#F5F5F5')
    // If we remove the d parameter it will break the code as it will return as undefined otherwise
    .attr('class', function (d, index) {
        return index % 2 === 0 ? 'even' : 'uneven';
    });

    // This controls the Axis line.
    svg.append('g')
    .attr('class', 'y axis axis-line')
    .append('line')
    .attr('x1', x(20))
    .attr('x2', x(20))
    .attr('y2', height);

    d3.selectAll('.axis path')
    .style('fill', 'none')
    .style('stroke', '#000')
    .style('shape-rendering', 'crispEdges');

    d3.selectAll('.axis line')
    .style('fill', 'none')
    .style('stroke', '#000')
    .style('shape-rendering', 'crispEdges');

}

下面是 SVG 的 jsFiddle: https://jsfiddle.net/bguLnktk/

如果可能的话，这就是我希望用户标签的样子

Answer 1

您的问题是 y 轴:

您有两个选择。选项 A. 移动轴:

选项 B。在文本 ( ) 上添加尾部空格

希望对您有所帮助。