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