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：動態地將數據傳遞到餅圖

回答

相關問題