title: d3 chain methods for .on() events
body: <p>Thanks to the reusable table setted up with this help</p>
  
  <p><a href="https://stackoverflow.com/questions/14514776/updating-a-table-in-d3-js-using-a-reusable-chart">Updating an HTML table in d3.js using a reusable chart</a></p>
  
  <p>I have a good reusable <a href="http://d3js.org" rel="nofollow noreferrer">D3.js</a> code, applied for example here:</p>
  
  <p><a href="http://ross.iasfbo.inaf.it/~gloria/web-examples/valencia/bright-stars.html" rel="nofollow noreferrer">http://ross.iasfbo.inaf.it/~gloria/web-examples/valencia/bright-stars.html</a></p>
  
  <p>Initializing and calling it is simple:</p>
  
  <pre><code>var t1 = myreusabletable(); // initialization
  t1.columns(["id","column","other_column"]) // column setup
  
  d3.json("data.json",function(error,data){
      d3.select("body").datum(data).call(t1)
  });
  </code></pre>
  
  <p>However, until now, event bindings
  have to be pre-coded in the <code>myreusabletable()</code> function:</p>
  
  <pre><code>rows.on('mouseover', function(d){mouseover(d)});
  </code></pre>
  
  <p>and setted from outside</p>
  
  <pre><code>function mouseover(d){
    ...
  }
  </code></pre>
  
  <p><strong>My question is:</strong> how can I set up a method in <code>myreusabletable()</code> so that I can chain the <code>.on(event,function)</code>  from outside like that:</p>
  
  <pre><code>var t1 = myreusabletable(); // initialization
  t1.columns(["id","column","other_column"]) // column setup
    .on("mouseover",function(d,i){...})  // event binding setup here
    .on("click",function(d,i){...}) // event binding setup here
  </code></pre>
  
  <p>Thank you for your help!</p>