d3.js : 动态传递数据到饼图

Question

在我的 AngularJS 应用程序中，我使用浮点图在饼图中绘制动态值，如下面的链接所示：

http://plnkr.co/edit/WEJMA0f7DnnAh6h8jaMW?p=preview

在flot图表中，我可以在运行时使用标签的'chartdata'属性和范围变量传递饼图值。

div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
    {{user.name}}
    <div class="flotcontainer" my-chart chartdata="user.data"></div>
</div>

我正在尝试类似地在 D3.JS 中传递动态数据。这是我试过的一个例子： http://plnkr.co/edit/iQfkXewUVAylVU4s2913?p=preview

但我不确定如何在 D3 中传递动态数据。它似乎没有任何类似于标签的“图表数据”标签的标签。

有人可以帮忙吗？

Answer 1

我所做的是创建可重用的指令来封装我尝试使用的 D3 功能。所以每当我想使用饼图时，我只需使用我的自定义饼图指令：

<my-pie-chart chart-data="val"></my-pie-chart>

指令代码为我处理所有 D3 绘图。 Here's 别人的例子，我在说什么。

Answer 2

或者，您可以使用一整套预制指令。

我发现Angular-NVD3 相当不错，但Angular-NVD3-Directives 更受欢迎。 Angular-NVD3 在控制器中将其图表属性定义为 JavaScript 对象：

{
  "chart": {
    "type": "pieChart",
    "height": 500,
    "showLabels": true,
    "transitionDuration": 500,
    "labelThreshold": 0.01,
    "legend": {
      "margin": {
        "top": 5,
        "right": 35,
        "bottom": 5,
        "left": 0
      }
    }
  }
}

Angular-NVD3-Directives 在 HTML 代码中定义了它的图表属性：

<div ng-controller="ExampleCtrl">
  <nvd3-pie-chart
    data="exampleData"
    id="exampleId"
    width="550"
    height="350"
    x="xFunction()"
    y="yFunction()"
    showLabels="true">
    <svg></svg>
  </nvd3-pie-chart>
</div>

您将在两个页面上找到详细示例。