score:1

Accepted answer

I accept @Alex answer for writting the text along the path.. but

The Example you shown is a multiline graph which draws the line and text at the end one by one..

Likewise you tried to include lines manually one by one.. In such case you need to append the text also the same way one by one after drawing each line..

graph.append("svg:path").attr("d", line(json))
        .append("svg:g")
        .append("text")
        .attr("x", 10)
        .attr("y",10)
        .text("text");

This wont append the text at the end... Instead try something like this

graph.append("svg:path").attr("d", line2(json)).style("stroke", "green");



graph.append("text")
      .datum(function(d) { return {value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," +       y(d.value.yvalue) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text("Text");

I will explain you what exactly i did...

.datum(function(d) { return {value: d.values[d.values.length - 1]}; })

I am returning the last point (x,y) values.. this changes according to your json format.. here (values) is a key for me..

.attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," +       y(d.value.yvalue) + ")"; })

It transforms the text to that last(x,y)value... It gives you the desired output of appending the text at the end of the path(line)

Hope it Helps!

This is the code according to your json..It works check it out

    linesGroup.append("text")
      .datum(function(d) {return linedata.points[0] ; })
        .attr("transform", function(d) {console.log(d);console.log("translate(" + x(d.created_at) + "," + y(d.rate) + ")"); return "translate(" + x(d.created_at) + "," +       y(d.rate) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
    .text(function(d){return (d.tag);});

};

score:2

Take a look at this Gist (demo code) which shows the use of svg:textPath to label a path. The example shows a generic curved path, but it should just as easily apply to your line element.


Related Query

More Query from same tag