如何将文本添加到垂直线d3js

Question

我试图使用d3将文本添加到垂直线。原则上，文本附加到该行，但未显示。任何想法为什么？这是我的代码和当前状态的图像。 Code problem 在此先感谢！

 var espanya = aggregatevalue(data)[0]['2015']; 
     var svg = d3.select("#UnemploymentRate") 
        .append("svg") 
        .attr("id", "chart") 
        .attr("width", w) 
        .attr("height", h); 

     svg.append("g") 
      .attr("class", "espanya line") 

     var lespanya = d3.select(".espanya.line") 
         .append("line") 
         .attr("class", "line") 
         .style("stroke-width", 2) 
         .style("stroke", "black") 
         .style("stroke-dasharray", ("3, 3")) 
         .style("fill", "none"); 

      lespanya.attr("x1", padding.left + widthScale(espanya)) 
       .attr("y1", heightScale(maximo)) 
       .attr("x2", padding.left + widthScale(espanya)) 
       .attr("y2", h - padding.bottom); 

      lespanya.append("text") 
        .attr("x", 486.78) 
        .attr("y", 300) 
        .text("Spain Average unemployment"); 

Answer 1

您不应将该组追加到线条元素。您可以将文字和行添加到.espanya。

它必须或多或少这样，

var svg = d3.select("#UnemploymentRate") 
       .append("svg") 
       .attr("id", "chart") 
       .attr("width", w) 
       .attr("height", h); 

    var container = svg.append("g") 
     .attr("class", "espanya") 

    var lespanya = container 
        .append("line") 
        .attr("class", "line") 
        .style("stroke-width", 2) 
        .style("stroke", "black") 
        .style("stroke-dasharray", ("3, 3")) 
        .style("fill", "none"); 

    var text = container 
       .append("text") 
       .attr("x", 486.78) 
       .attr("y", 300) 
       .text("Spain Average unemployment"); 

试试这个，提供的jsfiddle，如果它不能正常工作。