In D3:  

I'm trying to implement a chart using the [reusable charts pattern](http://bost.ocks.org/mike/chart/) which allows me to add events which are handled outside the actual chart. For instance I have a simple barchart where I can click on each individual bar. Now instead of just handling the click event inside the chart component I want to be able to handle it from where I create a chart instance. For example I want to edit the data which corresponds to the clicked bar element or I want to update the position of some other element depending on the position of the bar I clicked on. To keep the chart component as modular and independent as possible I don't want certain tasks to be done inside it.

I came up with a pretty straight forward solution but I feel like there must be a better solution to this. This way I have to account for every possible event that the outside world might be interested in. [JSFiddle](http://jsfiddle.net/hypktL5x/3/)

```
function clickHandler(d, i) {
  // do something with the element/event/data
}

var svg = d3.select('#container')
  .append('svg');

var myChart = chart()
    .onClick(clickHandler);

svg.append('g')
  .datum(data)
  .call(chart);

function chart() {
  var onClick = function() {};

  function _chart(selection) {
    selection.each(function(d, i) {

      selection.selectAll('rect')
        .data(d)
        .enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d, i) {return i * 11;})
        .attr('width', function(d, i) {return d;})
        .attr('height', 10);
        .on('click', _onClick);

    });
  }

  function _onClick(d, i) {
    d3.select(this)
      .attr('fill', 'red');

    onClick(d, i);
  }

  _chart.onClick = function(_) {
    if(!arguments.length) return onClick;
    onClick = _;
    return _chart;
  }

  return _chart;
}

```

Is there any kind of standard way/best practice to handle this type of situation? Or is this just not really a common situation?

Any help appreciated!