如何将文本附加到 d3.js 中的一行答案

【问题标题】：How to append text to a line in d3.js如何将文本附加到 d3.js 中的一行
【发布时间】：2016-06-09 10:35:29
【问题描述】：

我正在尝试将文本附加到在条形图上创建的线条。问题是我可以看到创建了文本元素。但它没有显示在 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

【问题讨论】：

你不能将文本附加到一行，你需要将它附加到两者的容器中

标签： javascript d3.js svg

【解决方案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");

【讨论】：

【解决方案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

【讨论】：