Imo Imo - 8 months ago 65
Javascript Question

How to append text to a line in d3.js

I am trying to append a text to a line created on bar chart. The problem is that I can see that the text element is created. But it does not show anywhere on the svg.
part of code where I append text

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")

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

see plunker for full code


You can't append a text to a line. Just create another variable for the text:

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