Javascript d3.js：动态地将数据传递到饼图

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

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

div ng repeat=“记录事件中的用户”ng style=“{'display'：'inline block'}”>
{{user.name}

我试图在D3.JS中传递类似的动态数据。下面是我尝试过的一个例子：

但我不知道如何在D3中传递动态数据。它似乎没有任何类似于标记的“chartdata”标记的标记

---

有人能帮忙吗？

我所做的是创建可重用指令，封装我试图使用的D3功能。因此，每当我想使用（比如）饼图时，我只需使用我的自定义饼图指令：

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

---

指令代码为我处理所有D3图形。我所说的其他人的例子。

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

我发现它很不错，但它更受欢迎。 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指令以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>

---

您可以在这两页上找到详细的示例。

我只想使用d3。nvd3不适合我的情况，因为它似乎不支持移动设备。有其他建议吗？@Jean您必须创建一个自定义指令。但在使用了这两种技术之后，我可以向您保证Angular-NVD3是完全响应的。请尝试在上调整浏览器的大小。我不知道如何将此用于饼图。您给出的示例是条形图。你能帮忙吗？