为什么文本附加在 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; });

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

Why text append outside svg element d3js?

d3.js