Как добавить текст в строку в d3.js

Question

Я пытаюсь добавить текст в строку, созданную на гистограмме. Проблема в том, что я вижу, что текстовый элемент создан. Но он ничего не показывает на svg. часть кода, где я добавить текст

var line = svg.append("line") 
       .attr("x1", function(){ return x(lineEnd)}) 
       .attr("x2", function(){ return x(lineEnd)}) 
       .attr("y1", 0) 
       .attr("y2", height) 
       .attr("stroke-width", 6) 
       .attr("stroke", "black") 
       .attr("stroke-dasharray", "8,8") 



    line.append('text') 
      .attr('class', 'barsEndlineText') 
      .attr('text-anchor', 'middle') 
       .attr("x", 0) 
      .attr("y", ".35em") 
      .text('I am label') 

see plunker for full code

Answer 1

Вы не можете присоединять text к line. Просто создайте другую переменную для текста:

var myText = svg.append("text") 
    .attr("y", height - 10)//magic number here 
    .attr("x", function(){ return x(lineEnd)}) 
    .attr('text-anchor', 'middle') 
    .attr("class", "myLabel")//easy to style with CSS 
    .text("I'm a label"); 

Answer 2

Я видел это раньше, но, похоже, не нашел его. В основном вам нужен контейнер для обеих линий и текста, поэтому при переводе строки текст перемещается вместе с ним:

var line = svg.append("g") 

line.append("line") 
       .attr("x1", function(){ return x(lineEnd)}) 
       .attr("x2", function(){ return x(lineEnd)}) 
       .attr("y1", 0) 
       .attr("y2", height) 
       .attr("stroke-width", 6) 
       .attr("stroke", "black") 
       .attr("stroke-dasharray", "8,8") 



line.append('text') 
      .attr('class', 'barsEndlineText') 
      .attr('text-anchor', 'middle') 
       .attr("x", 0) 
      .attr("y", ".35em") 
      .text('I am label') 

Обновлено PLNKR: http://plnkr.co/edit/lASjq4ysrYGqWUGtMgRd?p=preview