AngularJS Directive for D3 Charts

Question

I want to pack my custom bar chart into an class which is used by an ng-directive. I want to use the directive twice (or more..)

<div ng-app="charts">
    <div ng-controller="mainCtrl">
        <chart-form></chart-form>
        <bar-chart height="options.height" data="data" hovered="hovered(args)"></bar-chart>
        <bar-chart height="options.height" data="data2" hovered="hovered(args)"></bar-chart>
    </div>
</div>

You can see the demo here: http://jsfiddle.net/uhuRC/2/

when you use the fader to change the height you will see fast switches between the two chart datas

Thank you in advanced!

Answer 1

You're declaring the

var chart = new d3.custom.barChart();

Inside of the directive factory closure, which is used to create a singleton instance of the directive. As a result, you're reusing the same barchart instance for both charts.

If you move that variable into the link method (which is a closure that is created for each instance of the directive), it should create two bar charts instead of what you're getting now, which is just one sort of broken bar chart. Here's a jsFiddle with the change:

http://jsfiddle.net/reblace/uhuRC/3/