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多线程初学者指南（11）：使用Synchronized块同步方法

    synchronized关键字有两种用法.第一种就是在<使用Synchronized关键字同步类方法>一文中所介绍的直接用在方法的定义中.另外一种就是synchronized块.我们不仅可 ...

  2. Web应用的组件化（一）

    基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...

  3. Code First:如何实现一个主类中包含多个复类

    假设我们在程序中要用到的类的结构是这样的,这里比较特别的是B在A中出现了最少两次 public class B { [Key] public int Id { get; set; } public s ...

  4. spring 属性配置细节

    1.使用构造器注入属性值可以指定参数的位置和参数的类型!以区分重载的构造器.例如:<constructor-arg value="" type="java.lang ...

  5. iOS开发UI基础—手写控件，frame，center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

  6. 可恶的QT隐式共享

    这个问题隐藏的很深,一般不容易察觉它造成的问题,而只是享受它提供的好处(节省内存,而且速度更快). 但我发现它现在至少造成两个问题: 1. 把大量的QString放到QMap里,使用完毕后清空QMap ...

  7. 115太酷了，居然出了个TV版客户端

    确实,智能电视代表了未来的方向,是智能家居的最重要客户端,TV也能做很多事情呢!!不要忘了这个市场,想想什么服务在TV上是最需要的? http://pc.115.com/tv.html

  8. 【Xamarin挖墙脚系列：Xamarin.IOS的程序的结构】

    原文:[Xamarin挖墙脚系列:Xamarin.IOS的程序的结构] 开始熟悉Xamarin在开发IOS的结构!!!!!!! 先看官方 这个是以一个单页面的程序进行讲述的. 1 程序引用的程序集,核 ...

  9. 【转】提供android 5.0 AOSP源码下载

    http://blog.csdn.net/innost/article/details/41148335 android-5.0.tar.gz 115网盘礼包码:5lbcl16a1k7q http:/ ...

  10. GIS大讲堂内所有讲座的索引（更新至2008年6月26日）(转)

    转自:http://www.cnblogs.com/xiexiaokui/archive/2008/11/20/1337934.html GIS大讲堂内所有讲座的索引(更新至2008年6月26日)   ...