关闭

D3.js入门

标签: d3d3.js
242人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script src="dist/d3.min.js"></script>
<script>
/*绑定数据
 *1、数据
 *2、选中的DOM元素*/
var dataset = [5, 10, 15, 20, 25];
var li = d3.selectAll("li");
var liq=$('li');
console.log(li);
console.log(liq);
d3.select("body")
    .selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("new Paragraph!");
</script>

.select(“body”)返回DOM中第一个匹配元素的引用。
.selectAll(“li”)返回所有元素。
但是这个和jquery的元素选择还不一样。
如图,返回的对象是_group和 _parent,其实意思是一样的,因为jquery也会返回父元素。
这里写图片描述

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

【 D3.js 入门系列 — 11 】 入门总结

前面各章节加起来,文章总数已有22篇,对于D3.js的入门来说已经足够了,特此总结。
  • lzhlzz
  • lzhlzz
  • 2014-09-17 13:43
  • 51449

【 D3.js 入门系列 --- 4 】 如何使用scale(比例)

在上一节中使用了一个很重要的概念 — scale (这个不知道翻译成什么,暂且叫它比例)。本节将重点介绍它的相关使用方法。
  • lzhlzz
  • lzhlzz
  • 2014-06-20 15:13
  • 16610

【 D3.js 入门系列 --- 10.2 】 可拖动的地图

本文是结合地图和力学图制作的一个可拖动的地图。用户可以自由的用手拖动中国的各省。
  • lzhlzz
  • lzhlzz
  • 2014-09-03 10:35
  • 12377

D3.js入门指南

  • 2015-05-13 13:55
  • 590KB
  • 下载

【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素

本章介绍在D3.js中关于如何选择,插入和删除元素。
  • lzhlzz
  • lzhlzz
  • 2014-06-09 09:43
  • 10578

【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

下面开始用D3.js处理第一个简单问题,先看下面的代码:  HelloWorld Hello World 1 ...
  • lzhlzz
  • lzhlzz
  • 2014-05-27 13:59
  • 8039

【 D3.js 入门系列 --- 9 】 常见可视化图形

Layout 是 D3 中 “制作常见图形的函数”,用 Layout 可以轻松地对输入数据进行转换,使得它能容易地适应可视化图形使用的需要。
  • lzhlzz
  • lzhlzz
  • 2014-07-13 10:39
  • 11504

【 D3.js 入门系列 --- 9.4 】 集群图的制作

这一节学习用 D3 绘制集群图( Cluster )。初始数据保存于 JSON 文件中,我们使用 D3 读取文件,用 Layout 转换成适合于集群图的数据,再进行绘制。
  • lzhlzz
  • lzhlzz
  • 2014-08-05 13:48
  • 11426

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本节介绍打包图( pack )的制作过程,和前面几节一样,使用 D3 提供 layout 来转换数据,并进行绘制。
  • lzhlzz
  • lzhlzz
  • 2014-08-20 22:04
  • 5394

【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

http://blog.csdn.net/lzhlzz/article/details/36869567  在前面几节中反复出现了如下代码: [javasc...
  • csdn_huangyumin
  • csdn_huangyumin
  • 2015-10-27 15:16
  • 221
    个人资料
    • 访问:178876次
    • 积分:2862
    • 等级:
    • 排名:第14320名
    • 原创:118篇
    • 转载:15篇
    • 译文:0篇
    • 评论:39条
    最新评论