我在我的d3.js代碼追加文本，但它不顯示文本

Question

script type="text/javascript"> 

    d3.csv("mydata.csv", function(data){ 

    var svgcontainer = d3.select("body").append("svg") 
         .attr("width",500) 
         .attr("height",500) 

     svgcontainer.selectAll("rect")  
        .data(data)  
        .enter() 
        .append("rect") 
        .attr("width" ,function (d) { return d.age * 10;}) 
         .attr("height" ,45) 
         .attr("y",function(d,i) { return i*50; }) 
         .attr("fill","blue") 

     svgcontainer.selectAll("text") 
         .data(data) 
         .enter() 
         .append("text") 
         .attr("fill","white") 
         //.attr("y",function(d,i) { return i*50 ; })       
         .text(function (d) { return d.name; }) 

    }) 

我在我的d3.js代碼追加文本，但它不顯示text.I是新來d3.js所以請任何人幫助我。這裏是我的代碼 -

Answer 1

從第一個觀察我會知道與svg文本元素位置有關的問題。在SVG Coordinate職位對實現圖形表示非常重要。在上面的代碼片段x和y位置丟失。下面的示例代碼： -

svgcontainer.append("text") 
    .attr("x", function(d) { return x(d.value) - 3; }) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.value; }); 

Example