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. tableView被Nav挡住了

    // 1. //    self.navigationController.navigationBar.translucent = NO; //    self.tabBarController.ta ...

  2. 从小白进阶ubuntu高手的必经之路—命令

    精选的十二个ubuntu下的命令,熟记于心,则能甩掉ubuntu小白标签,高手的伟岸形象焕然生发.一.管理员权限绝大部分情况下,命令的行为须要被赋予管理员权限才能执行.命令 sudo 作用:赋予当前命 ...

  3. App小样在手机运行了一下

    外包公司把App小样的安装包发过来了,我在安卓手机上试了一把,虽然还只有几个静态页面,但安装那一刻还是小激动了一把. 在某美术系MM的帮助下,我基本掌握了原型软件azure. 事实证明,很多东西都是逼 ...

  4. PYTHON连MS SQL示例

    先要设置WINDOWS的系统DSN的.然后才可以哟. import pyodbc conxn = pyodbc.connect('DSN=BBB; DATABASE=Northwind;UID=AAA ...

  5. ruby面向对象class

    ruby对象是严格封装的:只能通过定义的方法访问其内部状态.方法使用的成员变量在对象外部不能直接访问,不过可以通过getter.setter等访问器方法(accessor),使他们看起来好像是直接访问 ...

  6. 解读30个提高Web程序执行效率的好经验

    其实微博是个好东西,关注一些技术博主之后,你不用再逛好多论坛了,因为一些很好的文章微博会告诉你,最近看到酷勤网推荐的一篇文章<30个提高Web程序执行效率的好经验>,文章写得不错,提到一些 ...

  7. 【HDOJ】1166 敌兵布阵

    线段树. #include <stdio.h> #define maxn 55555 ]; void PushUP(int rt) { sums[rt] = sums[rt<< ...

  8. java学习多线程之生产者消费者

    在java多线程当中还有一种关系需要我们来重点掌握,那就是生产者和消费者的关系.那么什么是生产者,什么是消费者呢?我们可以举个例子来说,有张三.李四负责生产烤鸭,王五.马六负责吃烤鸭,那么前者生产完烤 ...

  9. 汉企C#面向对象——继承

    public class Shengwu { private string _Name; public string Name { get { return _Name; } set { _Name ...

  10. Master Nginx(1) - Installing Nginx and Third-Party Modules

    Installing NGINX and Third-Party Modules Installing Nginx using a package manager Linux(deb-based) s ...