如何将文本附加到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')

请参阅plunker获取完整代码

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