Lines as Text

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    g.line path {fill: none; stroke: lightgray; stroke-dasharray: 5, 15;}
    g.line text {font: ""; fill: gray; font-size: 14px;}
  </style>
</head>

<body>
  <script>
    var margins = {top: 5, right: 10, bottom: 25, left: 30},
        width = 960,
        height = 500;
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g").attr("class", "margins")
        .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
    
    var data = [
      {name: "Tom", values: [1, 2, 3, 4, 5]},
      {name: "Jane", values: [2, 5, 3, 1, 6]},
      {name: "Frank", values: [5, 3, 2, 2, 1]}
    ];
    
    var x = d3.scaleLinear()
    	    .domain([0, d3.max(data, d => d.values.length - 1)])
    	    .range([0, width - margins.left - margins.right]),
        xAxis = d3.axisBottom().scale(x),
        y = d3.scaleLinear()
    			.domain([0, d3.max(data, d => d3.max(d.values))])
    			.range([height - margins.top - margins.bottom, 0]),
        yAxis = d3.axisLeft().scale(y),
        line = d3.line()
    			.x(function(d, i) { return x(i); })
    			.y(function(d) { return y(d); })
    			.curve(d3.curveMonotoneX);
    
    svg.append("g").attr("class", "x axis")
      		.attr("transform", "translate(" + 0 + "," + (height - margins.bottom - margins.top) + ")")
      		.call(xAxis);
    svg.append("g").attr("class", "y axis").call(yAxis);
    
    var lineGroups = svg.selectAll("g.line").data(data)
    	.enter().append("g")
    		.attr("class", "line");
    lineGroups.append("path")
    		.attr("id", d => d.name)
    		.attr("d", d => line(d.values));
    lineGroups.append("text")
    		.attr("dy", "0.35em")
      .append("textPath")
    		.attr("xlink:href", d => "#" + d.name)
    		.text(d => nameRepeat(d.name));

function nameRepeat(name) {
    var repeatNum = 50;
    var outText = "";
    for (var i = 0; i < repeatNum; i++) outText += (name + " ");
    return outText
  }

</script>
</body>

https://d3js.org/d3.v4.min.js