ディレクティブを使用してD3 Chartを表示する方法は？

JSONオブジェクトから円グラフを表示しようとしています。ディレクティブを使用してD3 Chartを表示する方法は？

私はそれが動作します。このオブジェクトで試してみてください。

[{ 
    "id": "id1", 
    "name": "the name 1", 
    "values": [{ 
    "age": "One", 
    "population": 5 
    }, { 
    "age": "Two", 
    "population": 2 
    }, { 
    "age": "Three", 
    "population": 9 
    }, { 
    "age": "Four", 
    "population": 7 
    }, { 
    "age": "Five", 
    "population": 4 
    }, { 
    "age": "Six", 
    "population": 3 
    }, { 
    "age": "Seven", 
    "population": 9 
    }] 
}]

が、これだけで：

[{ 
    "age": "One", 
    "population": 5 
}, { 
    "age": "Two", 
    "population": 2 
}, { 
    "age": "Three", 
    "population": 9 
}, { 
    "age": "Four", 
    "population": 7 
}, { 
    "age": "Five", 
    "population": 4 
}, { 
    "age": "Six", 
    "population": 3 
}, { 
    "age": "Seven", 
    "population": 9 
}]

これは私のコードです：

var app = angular.module("d3Test", ['d3Test.directives']); 
 

 

 

 
angular.module('d3Test.directives', []) 
 

 

 

 
.controller('IndicatorsCtrl', function($scope, Indicators) { 
 
     $scope.datas = '[{ "age": "One", "population": 5 },{ "age": "Two", "population": 2 }]'; 
 

 

 
     .factory('Indicators', function($resource) { 
 
     return $resource('datas.json'); 
 
     }) 
 

 
     angular.module('d3Test.directives', []). 
 
directive('graph', function() { 
 
\t return { 
 
\t \t restrict: 'E', 
 
\t \t scope: { 
 
\t \t \t values: '=' 
 
\t \t }, 
 
\t \t link: function (scope, element, attrs) { 
 
\t \t \t scope.$watch('values', function(values) { 
 
\t \t \t \t if(values) { 
 
\t \t \t \t \t console.log('values from directive: ', values); 
 
\t \t \t \t \t 
 
\t \t \t \t \t var width = 960, 
 
\t \t \t \t \t height = 500, 
 
\t \t \t \t \t radius = Math.min(width, height)/2; 
 
\t \t \t \t \t 
 
\t \t \t \t \t var color = d3.scale.ordinal() 
 
\t \t \t \t \t \t .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
 
\t \t \t \t \t 
 
\t \t \t \t \t var arc = d3.svg.arc() 
 
\t \t \t \t \t \t .outerRadius(radius - 10) 
 
\t \t \t \t \t \t .innerRadius(0); 
 
\t \t \t \t \t 
 
\t \t \t \t \t var pie = d3.layout.pie() 
 
\t \t \t \t \t \t .sort(null) 
 
\t \t \t \t \t \t .value(function(d) { 
 
\t \t \t \t \t \t \t return d.population; 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t var svg = d3.select("body").append("svg") 
 
\t \t \t \t \t \t .attr("width", width) 
 
\t \t \t \t \t \t .attr("height", height) 
 
\t \t \t \t \t \t .append("g") 
 
\t \t \t \t \t \t .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t values.forEach(function(d) { 
 
\t \t \t \t \t \t \t d.population = +d.population; 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t var g = svg.selectAll(".arc") 
 
\t \t \t \t \t \t \t .data(pie(values)) 
 
\t \t \t \t \t \t \t .enter().append("g") 
 
\t \t \t \t \t \t \t .attr("class", "arc"); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t g.append("path") 
 
\t \t \t \t \t \t \t .attr("d", arc) 
 
\t \t \t \t \t \t \t .style("fill", function(d) { return color(d.data.age); }); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t g.append("text") 
 
\t \t \t \t \t \t \t .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
 
\t \t \t \t \t \t \t .attr("dy", ".35em") 
 
\t \t \t \t \t \t \t .style("text-anchor", "middle") 
 
\t \t \t \t \t \t \t .text(function(d) { return d.data.age; }); 
 

 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t } 
 
\t } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="3.2.2" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="d3Test"> 
 
    <div ng-controller="IndicatorsCtrl"> 
 

 

 
    <p>datas: {{datas}}</p> 
 
    <p>values: {{datas[0].values}}</p> 
 

 
    </div> 
 

 

 

 
</body> 
 

 
</html>

出典

2016-04-18 LaymoO

おそらくあなたの<graph />ディレクティブを間違って呼んでいると思います（どちらか一方のディレクティブをcompositeObjectに双方向バインドしてからcompositeObject.valuesと呼んでください）。あなたのディレクティブが現在書かれている方法では、オブジェクトではなく値を渡すべきです。また

あなたが深い$watchのいくつかの並べ替えを行う必要がありますデータの変更のいずれかが（第3引数としてtrueの値を渡す）場合、あなたの<graph />を自動的に更新する場合。私はダッシュボードのためにこれらのd3のチャートを折り返し、角度のある自分自身をしばらく巻きました... although consider using a library for your charts。ここで

は、あなたのコードから作業例（あなたのリンクがhttpsたので、私は1.0.8ではなく1.0.7を使用）です：

https://plnkr.co/edit/KTLMV2ObafZAkLr11Gxy?p=preview

app.js

var app = angular.module("d3Test", ['ngResource']) 
.controller('IndicatorsCtrl', function($scope, Indicators) { 
    $scope.datas = [{ 
    "age": "One", 
    "population": 5 
    }, { 
    "age": "Two", 
    "population": 2 
    }]; 
}) 
.factory('Indicators', function($resource) { 
    return $resource('datas.json'); 
}) 
.directive('graph', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     values: '=' 
    }, 
    link: function(scope, element, attrs) { 
     scope.$watch('values', function(values) { 
     if (values) { 
      console.log('values from directive: ', values); 

      var width = 960, 
      height = 500, 
      radius = Math.min(width, height)/2; 

      var color = d3.scale.ordinal() 
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

      var arc = d3.svg.arc() 
      .outerRadius(radius - 10) 
      .innerRadius(0); 

      var pie = d3.layout.pie() 
      .sort(null) 
      .value(function(d) { 
       return d.population; 
      }); 

      var svg = d3.select("body").append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .append("g") 
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 



      values.forEach(function(d) { 
      d.population = +d.population; 
      }); 

      var g = svg.selectAll(".arc") 
      .data(pie(values)) 
      .enter().append("g") 
      .attr("class", "arc"); 

      g.append("path") 
      .attr("d", arc) 
      .style("fill", function(d) { 
       return color(d.data.age); 
      }); 

      g.append("text") 
      .attr("transform", function(d) { 
       return "translate(" + arc.centroid(d) + ")"; 
      }) 
      .attr("dy", ".35em") 
      .style("text-anchor", "middle") 
      .text(function(d) { 
       return d.data.age; 
      }); 

     } 
     }) 
    } 
    } 
});

index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.0.8/angular-resource.js" data-semver="1.0.8"></script> 
    <script data-require="[email protected]*" data-semver="3.2.2" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-app="d3Test"> 
    <div ng-controller="IndicatorsCtrl"> 
    <graph values="values"></graph> 
    </div> 

</html>

出典

2016-04-18 23:21:23

このように動作するはずです、あなたの答えをありがとう..私は今NVD3角度で作業しています。 – LaymoO

ディレクティブを使用してD3 Chartを表示する方法は？

答えて

関連する問題