javascript - JSON と Angular NVD3 の操作

Question

私のHTMLコード:

ここでは、ファイルからfields( key) を取得し、オプションに表示しています。JSON選択のドロップダウン セクションから選択するオプションに関係なく、nvd3 ディレクティブ データ オプション( data="drawData(data.repeatSelect1)") を介して、そのオプションを角度スクリプト js ファイルに送信します。

<div ng-controller="chartCtrl">

<label for="repeatSelect1"> Field 1: </label>
<select name="repeatSelect1" id="repeatSelect1" ng-model="data.repeatSelect1">
  <option ng-repeat="(key, val) in jsondata[0]">{{key}}</option>
</select>
<br />
<strong>Selected Field:</strong> {{data.repeatSelect1}}<br />
    <div class="col-md-6">
        <div class="well well-lg">
                <h2><kbd>Chart 1</kbd></h2>
                <nvd3-pie-chart
                      data="drawData(data.repeatSelect1)"
                      showLabels="true"
                      labelType="percent"
                      showValues="false"
                      tooltips="true"
                      x="xFunction()"
                      y="yFunction()"
                      donut="true"
                      donutRatio=".5"
                      labelThreshold = "0.05"
                      showLegend="true"
                      donutLabelsOutside="false"
                      transitionDuration = "500">
                </nvd3-pie-chart>
            </div>
        </div>
    </div>

これが私のAngularスクリプトコードです:

    angular.module('myapp').factory("test",['$http',function($http){
    var obj = {};

    obj.fetchdata=function(){
        return $http.get('http://localhost:8080/data/my_json_file.json');
    }

    return obj;
}]) .controller('chartCtrl',function($scope,test){
        test.fetchdata().success(function(data){
            $scope.jsondata = data;


            $scope.drawData = function(tobeselected){
                                        d3.nest()
                                        .key(function(d)
                                            {
                                                console.log(tobeselected);
                                                return d.tobeselected;
                                            })
                                        .rollup(function(v){return v.length;})
                                        .entries(data)
            }

            $scope.xFunction = function() {
              return function(d) {
                return d.key;
              };
            }
            $scope.yFunction = function() {
              return function(d) {
                return d.values;
              };
            }
        });
})

そして、ここに my_json_file.json があります

[{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{..}...]}

コードはエラーなしで正常に動作しています。

例：ドロップダウンで「シリアル」フィールドを選択すると、適切に選択され、angularjsスクリプトファイルにも表示されます（console.log（tobeselected）;を使用）が、d3.nestオプションが正しく機能しません。

通常のように与えると

d3.nest() .key(function(d){return d.Serial;} .rollup(function(v){return v.length;})

チャートをきちんと取得しています。この問題を解決するのを手伝ってください。