为什么文本附加在svg元素d3js之外？

Question

我尝试在svg元素上添加文本，如此

var chart = d3.select('.chart')
                .attr('width', 200)
                .attr('height', 200);


var left_axis = chart.select('.left_axis')               
    .data(left_axis_data)
    .enter().append('text')
    .attr("x", 0)
    .attr("y", function(d, i) { return i * 20})
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

我的例子：http://jsfiddle.net/zkcq86v2/1/为什么文本附加在svg元素之外？

Answer 1

将select更改为selectAll以确保将属性应用于所有元素

var left_axis_data = [
    {
        name : 'a',
        nmb : '1',
        state : '0'
    },
    {
        name : 'b',
        nmb : '2',
        state : '0'
    },
    {
        name : 'c',
        nmb : '3',
        state : '0'
    }
];

var chart = d3.select('.chart')
                .attr('width', 200)
                .attr('height', 200);


var left_axis = chart.selectAll('.left_axis')               
    .data(left_axis_data)
    .enter().append('text')
    .attr("x", 0)
    .attr("y", function(d, i) { return i * 20;})
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });