javascript - 用于 D3 图表的 AngularJS 指令

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/

当您使用推子改变高度时，您会看到两个图表数据之间的快速切换

先谢谢你!

Answer 1

你在声明

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

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

如果将该变量移动到链接方法(这是为指令的每个实例创建的闭包)，它应该创建两个条形图而不是你现在得到的，这只是一种损坏条形图。这是一个带有更改的 jsFiddle:

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