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代码中附加文字，但它没有显示文字。我是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

我必须在我的d3.js代码中附加文本，但它不显示文本

1 个答案: