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

以我AngularJS应用中，我使用海军报图表饼图中绘制动态值如下链接：d3.js：动态地将数据传递到饼图

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

在海军报图表，我可以在运行时通过标记的'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中传递动态数据。它似乎没有任何标签与标签的“chartdata”标签类似。

有人可以帮忙吗？

来源

2014-09-02 Jean

我所做的是创建封装我试图使用的D3功能的可重用指令。所以每当我想使用，比如说，一个饼图，我只是用我的自定义饼图指令：

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

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

来源

2014-09-02 09:08:20

我没有得到如何使用这个饼图。你给的例子是一个条形图。你能帮忙吗？ – Jean 2014-09-08 07:19:07

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

我发现Angular-NVD3是相当不错的，但Angular-NVD3-Directives更受欢迎。角NVD3定义了它的图表属性JavaScript对象，控制器：

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

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

你会发现详细的例子在两页上。

来源

2014-09-02 12:15:19 Goodzilla

我只想用d3。 nvd3不适合我的情况，因为它似乎没有支持手机。请提供其他建议吗？ – Jean 2014-09-08 07:18:09

@Jean你必须创建一个自定义指令。但使用这两种方法后，我可以保证您的Angular-NVD3具有完全的响应能力。只要尝试在[饼图示例]（http://krispo.github.io/angular-nvd3/#/pieChart）上调整浏览器的大小。 – Goodzilla 2014-09-08 08:38:33

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

回答

相关问题