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

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.

CodePudding user response：

Here's the code I used to add the labels. First part (knames) is what I used to plot the line too. (there might be an easier way of doing this):

var knames = d3.scaleOrdinal();

knames.domain(Object.keys(data[0]).filter(function(key){ //only get non-sma values
    return !key.match(/([_])|(d)|(band)\w /g)
  }));

var kvals = knames.domain().map(function(name){
    return {
      name: name,
      values: data.map(function(d){
        return {
          date: d.date,
          stock: d[name]
        };
      })
    };
  });

var sec = svg.selectAll("stock")
                  .data(kvals)
                  .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){
                     return "translate("   xScale(d.value.date)   ","   yScale(d.value.stock)  ")"
                   })
                   .attr("x", 7)
                   .attr("dy", ".3em")
                   .style("fill", function(d) {
                     return accent(d.name);
                   })
                   .style('font-family', 'Helvetica')
                   .style('font-size', '11px')
                   .style('letter-spacing', '1px')
                   .style('text-transform', 'uppercase')
                   .text(function(d){
                     return d.name;
                   });