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

I can't quite understand how to center the labels on the left of my d3 graph. I have seen that the solution is text-anchor: middle however this isn't working in my case and I'm not too sure why.

我不太明白如何将标签置于我的d3图左侧。我已经看到解决方案是文本锚:中间然而这在我的情况下不起作用,我不太清楚为什么。

This is the D3 Javascript that is building the SVG:

这是构建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');

}

Below is a jsFiddle of the SVG: https://jsfiddle.net/bguLnktk/

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

This is what I would like the user labels to look like if possible

这就是我希望用户标签尽可能看起来的样子

1 个解决方案

#1

Your problems is the y-axis:

你的问题是y轴:

You has two options. Option A. Move your axis:

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

Option B. Add trail spaces on text ( )

选项B.在文本()上添加跟踪空格

Hope this help.

希望这有帮助。

#1