title: Transition on line chart using d3.js
body: <p>In my line chart, initially all data needed for plot line. There is two button <code>Make</code> and <code>sell</code>, If I click on any one of the button, data related to that button should be plotted for line with transition effect as shown in <a href="http://dataaddict.fr/prenoms/#aldo" rel="nofollow">this link </a>. I have tried to make this work, but I can't. I tried to make relation between button and line chart as given below(code), its not working. I have hard coded <code>buttonId</code> in my code with <code>sell</code> to have data related to <code>sell</code>, if I change it to <code>Make</code> I will get data related to <code>Make</code> but I need to hard coded here. what I want is when a <code>Make</code> button clicked data related to <code>Make</code> should come with transition as above link shown. My code is</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;script type="text/javascript" src="d3.v3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="d3.chart.min.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="vis"&gt;&lt;/div&gt;
  &lt;button id="Make"&gt;Make&lt;/button&gt;
  &lt;button id="sell"&gt;sell&lt;/button&gt;
  &lt;script type="text/javascript"&gt;
  
  
  d3.chart("linechart", {
  
    initialize: function() {
      // create a base scale we will use later.
     var chart = this;
      chart.w = chart.base.attr('width') || 200;
      chart.h = chart.base.attr('height') || 150;
      chart.w = +chart.w;
      chart.h = +chart.h;
      buttonId = 'sell'
     chart.x = d3.scale.linear()
        .range([0, chart.w]);
  
    chart.y = d3.scale.linear()
        .range([chart.h,0]);
  
    chart.base.classed('line', true);
  
    this.areas = {};
        chart.areas.lines = chart.base.append('g')
                .classed('lines', true)
                .attr('width', chart.w)
                .attr('height', chart.h)
  
         chart.line = d3.svg.line()
                    .x(function(d) { return chart.x(d.x);})   
                    .y(function(d) { return chart.y(d.y);});
  
  
      this.layer("lines", chart.areas.lines, {
  dataBind: function(data) {
      // update the domain of the xScale since it depends on the data
         chart.y.domain([d3.min(data,function(d){return d.y}),d3.max(data,function(d){return d.y})])
   var mydata=new Array();
  if(buttonId)
  {
    var j=0;
    for(var i in data)
    {
     if(data[i].custody === buttonId){mydata[j] = data[i]; j++;};
    }
    chart.x.domain(d3.extent(mydata, function(d) { return d.x; }));
  }
  else
  {
    chart.x.domain(d3.extent(data, function(d) { return d.x; }));
  }
  
      // return a data bound selection for the passed in data.
      return this.selectAll("path").data([data]);
    },
   insert: function() {
      return this.append("path")
                .datum(data)
                .attr("d", chart.line)
                .attr('stroke','#1ABC9C')
                .attr('stroke-width','2')
                .attr('fill','none');
  
    }
  
      });
    },
  
    // configures the width of the chart.
    // when called without arguments, returns the
    // current width.
    width: function(newWidth) {
      if (arguments.length === 0) {
        return this.w;
      }
      this.w = newWidth;
      return this;
    },
  
    // configures the height of the chart.
    // when called without arguments, returns the
    // current height.
    height: function(newHeight) {
      if (arguments.length === 0) {
        return this.h;
      }
      this.h = newHeight;
      return this;
    },
  
  });
  
  var data = [
  {x: 0,y:190, custody: "Make"},
    {x: 1,y:10, custody: "Make"},{x: 2,y:40, custody: "Make"},{x: 3,y:90, custody: "Make"},
    {x: 4,y:30, custody: "sell"},{x: 5,y:20, custody: "sell"},{x: 6,y:10, custody: "sell"},
    {x: 7,y:40, custody: "sell"}
  ];
  
  var chart1 = d3.select("#vis")
    .append("svg")
    .chart("linechart")
    .width(720)
    .height(320)
  
  chart1.draw(data);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Get <code>d3.chart.min.js</code> from <a href="https://github.com/misoproject/d3.chart" rel="nofollow">d3.chart.min.js</a>
  and get <code>d3.v3.min.js</code> from <a href="http://d3js.org/" rel="nofollow">d3.v3.min.js</a></p>