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. C# 网页自动填表自动登录(转)

    自动填表的方式有很多,关键是获取控件的id或者name. 比如源代码有 <input id="pwdInput" tabindex="2" class=& ...

  2. 解决ubuntu侧边栏固定应用单击无反应的问题

    Linux下有些绿色软件,不需要安装就可以双击启动,但有些程序在打开后直接在 Launcher 中右键选择 Lock to Launcher ,但是,有时候单击图标后并未启动应用,下面给出解决方法. ...

  3. Unity3d 协程的注意问题（新手须注意，老手须加勉）

    关于unity3d的协程,非常的好用,比如等待几秒执行,等待下一帧执行等! 但是也有潜在的问题: 1.协程是单线程的,在主线程中完成 2.如果发现yield, 那么这一帧会结束,那么等下一帧调用此脚本 ...

  4. 快速搭建PHP开发环境（PhpStorm+EasyPHP）

    写在开头,何为PHP(拍黄片)? P HP是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用(维基百科). 从上我们得出,何为PHP? 1.开源脚本语言. 2.用于网络开发可嵌入 ...

  5. 又爱又恨的BOOTSTRAP

    搞本书,看了一天,确实,,UIKIT比它好用... 但,艺多不压身吧. 今天自己抄了个大概的,不用其它插件,,但那手风琴,真的找了很多,没有中意的... <!DOCTYPE html> & ...

  6. 【BZOJ 2005】[Noi2010]能量采集 （容斥原理| 欧拉筛+ 分块）

    能量采集 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋 ...

  7. 解决wordpress上传的文件尺寸超过 php.ini 中定义的 upload_max_filesize 值。

    上传的文件尺寸超过 php.ini 中定义的 upload_max_filesize 值. 解决方法:修改/etc/php5/apache2/php.ini文件中的 post_max_size = 6 ...

  8. 使用SQL Server 2014内存数据库时需要注意的地方

    作者 王枫发布于2014年7月4日 本文从产品设计和架构角度分享了Microsoft内存数据库方面的使用经验,希望你在阅读本文之后能够了解这些新的对象.概念,从而更好地设计你的架构. 内存数据库,指的 ...

  9. JAVA 数组常用技巧

    1.  在Java中输出一个数组(Print an array in Java) int[] intArray = { 1, 2, 3, 4, 5 }; String intArrayString = ...

  10. Android Http Server

    Android Http Server 1 引言          Android如何构建Http服务器呢?本文的小例子,约莫着,还是能做个参考的^^.恩,例子实现的是PC浏览手机文件,支持了下载和删 ...