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. JAVA NIO之Character Set

    明白以下几个概念: 字母集(Character Set),汉字,特殊符号,字母这些都是字符集: 字符编码集(Coded character set),将字符集的字符使用数字进行编码:比如ASCII,就 ...

  2. leetcode其余题目

    1.Largest Rectangle in Histogram http://discuss.leetcode.com/questions/259/largest-rectangle-in-hist ...

  3. iOS oc 中的闭包

    //闭包 NSString* s =@"123"; void (^block)() = ^() { NSLog(@"%@",s); }; block();// ...

  4. Metasploit介绍

    Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估, 提供真正的安全风险情报.这些功能包括智能开发,密码审计 ...

  5. 安装python环境（win7 64bit）

    原地址:http://blog.csdn.net/bryanliu1982/article/details/7184814 虽然简单,但是过段时间又忘了,还是记下来比较好. 总体来说只有两步: 下载安 ...

  6. 详解如何用AD 生成Gerber文件

    以上gerber文件就出完了;  下面步骤是:进行导出" 钻孔文件 ". 以上钻孔文件就出完了;  到此就全部完成输出了. 下面的操作,也可以不用导的 .下面步骤是:进行导出&qu ...

  7. 【Xamarin挖墙脚系列：Android最重要的命令工具ADB】

    原文:[Xamarin挖墙脚系列:Android最重要的命令工具ADB] adb工具提供了很好的基于命令的对系统的控制. 以前说过,安卓的本质是运行在Linux上的虚机系统.在Linux中,对系统进行 ...

  8. wikioi 1514 and ZJOI2006 书架

    1514 书架 0人推荐 收藏 发题解 提交代码 报错 题目描述 输入描述 输出描述 样例输入 样例输出 提示 题目描述 Description 小 T有一个很大的书柜.这个书柜的构造有些独特,即书柜 ...

  9. \u202e

    document.write('\u202e1\u202e2\u202e3')

  10. ☀【JS】有效状态机

    JavaScript与有限状态机http://www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html