title: D3.js: end-of-line labels for lines of various length
body: <p>I have data consisting of a series of values that I load as such:</p>
  
  <pre><code>vars = d3.keys(data[0]).filter(function(key) { return key !== 'round'; });
  color.domain(vars);
  
  var seasons = vars.map(function(name) {
      return {
          name: name,
          values: data.map(function(d) {
              return { round: d.round, position: +d[name] };
          })
      };
  });
  </code></pre>
  
  <p>I then do the following to draw a line per series:</p>
  
  <pre><code>var line = d3.svg.line()
      .defined(function(d) { return d.position !== 0; })
      .x(function(d) { return x(d.round); })
      .y(function(d) { return y(d.position); })
      .interpolate('linear');
  
  var season = svg.selectAll('.season')
      .data(seasons)
      .enter().append('g')
      .attr('class', 'seasons');
  
  var lines = season.append('path')
      .attr("class", function(d, i) { return "season" + i + " line"; })
      .attr('d', function(d) { return line(d.values); })
      .style('stroke', function(d) { return color(d.name); })
      .on('click', function(d,i) { highlight(d, i, this); });
  </code></pre>
  
  <p>As apparent, I have zero-values in my data that I don't want to plot, which is why I used the defined function for the line. However, I later want to add a label with the final data value per series at the end of the corresponding line, I get some issues. For the series ending with a zero-value, this label ends up showing the zero-value in the position where the line would end if the zero-value were included.</p>
  
  <pre><code>season.append('text')
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.round) + "," + y(d.value.position) + ")"; })
      .attr('dy', '.2em')
      .attr('class', 'label')
      .text(function(d) { return d.value.position; });
  </code></pre>
  
  <p>Anyone has any idea how I solve this?</p>