如何在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 获取完整代码

- Imo

---

你不能将文本附加到一行中，你需要将其附加到包含它们两者的容器中。 - thatOneGuy

Answer 1

你不能将“text”附加到“line”中。请为文本创建另一个变量：

您无法将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");

- Gerardo Furtado

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

此链接为更新后的PLNKR。

- thatOneGuy