AngularJS关于D3图表的指令

Question

我想将我的自定义条形图打包到一个被ng指令使用的类中。我想使用这个指令两次(或更多)

<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>

您可以在这里看到演示：http://jsfiddle.net/uhuRC/2/

当您使用fader更改高度时，您将看到两个图表数据之间的快速切换。

谢谢你的进阶！

Answer 1

你是在宣布

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

在指令工厂闭包内部，用于创建指令的单例实例。因此，您将对两个图表重用相同的条形图实例。

如果将该变量移动到link方法中(这是为指令的每个实例创建的闭包)，它应该创建两个条形图，而不是现在得到的，这只是一种断线图。下面是一个带有更改的jsFiddle：

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