如何將文本添加到垂直線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，如果它不能正常工作。