Как добавить текст в вертикальную линию 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, если он не работает.