[D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives.
<!DOCTYPE html>
<html ng-app="app">
<head >
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-view></div>
<!-- AngularJS Partial Template Start -->
<script type="text/ng-template" >
<button ng-click="setSubject('math')">Math</button>
<button ng-click="setSubject('science')">Science</button>
<button ng-click="setSubject('reading')">Reading</button>
<div area-chart class="area-chart" chart-data="chartData"></div>
</script>
<!-- AngularJS Partial Template End -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
</body>
</html>- 上一篇 »如何用css控制表格的边框？
- 下一篇 »css控制文本框的只读属性的方法
