I have this chart: The symbol names, '$TSLA' and '$AAPL' are not appended to the line, they are simply placed there with the appropriate x and y values. I would like to append them to the line, such that if the line ended at a different position, the symbol name would appear next to it. Like in this example.

Here is the code:

var svg = d3.select('#graph')
              .append('svg')
              .attr('width', w)
              .attr('height', h);

              svg.append('path')
                 .datum(data)
                 .attr('class', 'stock')
                 .attr('stroke', '#157145') ....
//I have included the above code because it is what's different from the link- 
//my lines are appended to the variable 'svg'. I am, however, selecting the correct class
//in the below code:
....

var sec = d3.selectAll(".stock")
                  .data(kvals) //this data follows the same pattern as the examples'
                  .enter().append("g")
                  .attr("class", "stock");

                sec.append("text")
                   .datum(function(d){
                     return {
                       name: d.name,
                       value: d.values[d.values.length-1]
                     };
                   })
                   .attr("transform", function(d){
                     console.log(xScale(d.value.date)); //not displayed in console.
                     return "translate(" + xScale(d.value.date) + "," + yScale(d.value.stock) +")"
                   })
                   .attr("x", 3)
                   .attr("dy", ".35em")
                   .text(function(d){
                     return d.name;
                   });

Thank you for your help. If you need all the code, I can paste it.