title: Series labels in Multi-line chart in d3.js
body: <p>I'm trying to do a multi-series line chart like the example here <a href="http://bl.ocks.org/mbostock/3884955" rel="nofollow">http://bl.ocks.org/mbostock/3884955</a></p>
  
  <p>the only difference is i'm trying to do a transition between two sets of data. The transition works absolutely fine but I have no idea how to begin to go about getting the series labels to align with each line as is the case in that example.</p>
  
  <p>Does anyone have any thoughts about how to go about it? My code is set up in a slightly different manner than the above example so I'm not able to follow it strictly. But even when I do, the data labels dont come through...</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;    
  body {
    font: 10px serif;
  }    
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
      fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  
  }
      .line {
    fill: none;
    stroke-width: 1.5px;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var width = 550;
              var height = 600;
              var padding=60;
  
  var parseDate = d3.time.format("%Y").parse;
  var x = d3.time.scale().range([padding, width-padding]);
  var y = d3.scale.linear().range([height-padding, padding]);        
  
  var z = d3.scale.category10();
  
  var xAxis = d3.svg.axis().scale(x).orient("bottom");
  var yAxis = d3.svg.axis().scale(y).orient("left");
  
  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
  
  
  //load CSV
  d3.csv("diverge-nonscaled1950.csv", function(error, data) {
  
      data.forEach(function(d) {
      d.date = parseDate(d.date);
      d.India=+d.India;
      d.China=+d.China;
        });
  
  
    //compute column names
  var seriesNames = d3.keys(data[0]).filter(function(d) { return d !== "date"; })
        .sort();
  
   //this is dataset one: data is scaled to column name INdia
        var series = seriesNames.map(function(series) {
      return data.map(function(d) {
        return {x: d.date, y: ((+d[series]/d.India)*100)};
      });
  
    });
  
   //this is dataset two: data is scaled to column name China
        var series1 = seriesNames.map(function(series1) {
      return data.map(function(d) {
        return {x: d.date, y: ((+d[series1]/d.China)*100)};
      });
  
    });
  
  
  var line = d3.svg.line()
      .interpolate("basis")
     // .defined(function(d) { return d.country&gt;0; })
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); });   
  
  
  //domains
  x.domain(d3.extent(data, function(d) { return d.date; }));
   y.domain([0,2300]);
   z.domain(seriesNames)
  
  
  //axes
    svg.append("g")
        .attr("class", "x axis")
  .attr("transform", "translate(0," + (height-padding) + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("x",0-(height/2.5))
        .attr("y", -50)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .style("font-size",11)
        .text("Relative per Capita Incomes");;
  
  //draw path
  svg.selectAll(".line")
      .data(series)
    .enter().append("path")
      .attr("class", "line")
      .attr("d", line)
      .attr("stroke",function(d, i) { return z(i); })
  
   //first transition from dataset one to two   
  d3.select("svg")
                 .on("click",file1);
  
  function file1(){
  svg.selectAll(".line").data(series1)
      .transition().duration(750)
      .attr("d", line)
      .attr("stroke",function(d, i) { return z(i); })
  
  d3.select("svg")
                 .on("click",file2);
  
    }
  
   //second transition back to one
  function file2(){
  svg.selectAll(".line").data(series)
      .transition().duration(750)
      .attr("d", line)
      .attr("stroke",function(d, i) { return z(i); })
  
  d3.select("svg")
                 .on("click",file1);
  
  
  } 
  
  
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks very much for any help whatsoever...
  Avin</p>