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. ssh登录docker容器

    ssh登录docker容器1.启动一个docker容器# docker run -t -i ubuntu/ruby:v1 /bin/bash2.然后在容器里,安装openssh-server open ...

  2. MyEclipse配置多个WEB容器

    MyEclipse支持多个同版本WEB容器同时运行 打开 然后按下图操作 咱们就得到了 下面需要配置新增加WEB容器的启动路径,在新增加的WEB容器上点击右键,选择箭头指向的菜单 打开的窗口如图,可以 ...

  3. CoreGraphics --- CGContext

    CGContext又叫图形上下文,相当于一块画布,以堆栈形式存放,只有在当前context上绘图才有效.iOS有分多种图形上下文,其中UIView自带提供的在drawRect:方法中通过UIGraph ...

  4. Python的数据类型总结

    原地可变类型和不可变类型 原地不可变类型又叫可哈希(hashable)类型,原地可变类型又叫不可哈希类型. 原地不可变类型: 数字类型:int, float, decimal.Decimal, fra ...

  5. 10 个 jQuery 的无限滚动的插件：

    很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1.  ...

  6. MinGW中的头文件路径级环境变量设置

    整理自 MinGW中的头文件路径   C头文件目录%MINGW_PATH%/include下有头文件,里面有strcpy等c函数的声明. C++头文件目录%MINGW_PATH%/lib/gcc/mi ...

  7. CAS单点登录配置[1]：准备工作

    关于CAS是什么这里就不在赘述,网友将它比喻成旅游景点的套票,买了一个套票就可以观看所有景点,不需要一个景点买一次票...我们重点介绍CAS单点登录的配置. 工具/原料 1.配置好JDK环境,否则不方 ...

  8. [topcoder]BinaryCards

    现在觉得有空时可以刷一下topcoder的DIV 2的Lvl 3的题目.感觉和刷LeetCode和WikiOi都是不一样的. http://community.topcoder.com/stat?c= ...

  9. Ubuntu 安装基础教程

    转自:http://teliute.org/linux/Ubsetup/index.html 1.进入 live cd 桌面  1)设置好启动后,断开网络,然后重启动计算机,可以用硬盘启动,也可以刻成 ...

  10. ANDROID_MARS学习笔记_S02_015_Gson解析json串为对象集合

    package com.example.s02_e12_json3; import java.lang.reflect.Type; import java.util.Iterator; import ...