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 lang="en">

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

<div ng-view></div>

<!-- AngularJS Partial Template Start -->

<script type="text/ng-template" id="chartTpl">

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

[D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive的更多相关文章

  1. [D3] 10. Creating Axes with D3

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. [D3] 12. Basic Transitions with D3

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本

    使用angular resource载入中priorityData.json中间json数据,结合D3绘制甜甜圈图.执行index.html其结果见于图.: priorityData.json中jso ...

  4. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  5. d3可视化实战00：d3的使用心得和学习资料汇总

    最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...

  6. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  7. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

  8. 夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout

    这里其实和js源生的效果是一样的,但是源生的在angularjs里面不能直接正常执行代码如下所示: <!DOCTYPE html> <html lang="en" ...

  9. AngularJS(15)-依赖注入

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

随机推荐

  1. Hibernate Session 获取connection

    Hibernate Session 获取connection 由于最近一个项目要用到一条辅助的SQL ,hibernate里面的SQLQuery API 总的SQL语句不能包含 : 冒号, 固放弃Hi ...

  2. ZOJ 2562 More Divisors

    又是个水题,刚刚开始没有用搜索,因为对于反素数有: n=2^t1*3^t2^5^t3*7^t4..... 这里有 t1>=t2>=t3>=t4. 而且相同的因数的情况下,素数越不同越 ...

  3. linux使用ps1设置命令行提示符

    要自定义命令行提示,需要ps1来设置.完成自定义需要以下几个步骤: 1.编辑~/.bashrc文件 vi ~/.bashrc 2.在.bashrc文件中添加以下一行自定义内容 export PS1=& ...

  4. 生意经：研究一下国外SAAS的产品线，比如Salesforce、Netsuite和Zendesk等等（Salesforce斥资7.5亿美元收购云计算字处理应用Quip）

    看他们做什么,我就做什么-甚至比他们做的更好. ------------------------------------------------------------ 新浪科技讯 北京时间8月3日下 ...

  5. 求奇数偶数的和，，利用while循环

    static void Main(string[] args)        {             while (true)                {             try   ...

  6. clang failed with exit code 1 的常见情况

    1:文件重复,如生成了一份  xxx副本.m 2:reachablity.h 这个文件经常重复. 以上优先检查 .

  7. TeamViewer 远程时出现：现在无法捕捉画面。这可能是由于恰的用户切换或远程桌面会话断开、最小化

    关掉远程访问主机的TeamViewer ,再重新打开软件

  8. 支持Python 2.7的pylot

    想用pylot测试一下板子上面的嵌入式web server.结果报错. E:\pylot_1.26>run.py -a 2 Traceback (most recent call last): ...

  9. 2 weekend110的hadoop的自定义排序实现 + mr程序中自定义分组的实现

    我想得到按流量来排序,而且还是倒序,怎么达到实现呢? 达到下面这种效果, 默认是根据key来排, 我想根据value里的某个排, 解决思路:将value里的某个,放到key里去,然后来排 下面,开始w ...

  10. hdoj 2767 Proving Equivalences【求scc&&缩点】【求最少添加多少条边使这个图成为一个scc】

    Proving Equivalences Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...