d3.js <一>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<!-- <p>Hello World 1</p>
<p>Hello World 2</p> -->
<div id="con"></div>
<div id="chart01"></div>
<bottom><button type="button" onclick="myadd()">add</button><button type="button" onclick="mysort()">sort</button></bottom>
<script src="./jquery-2.1.4.min.js" charset="utf-8"></script>
<script src="./d3.js" charset="utf-8"></script>
<script>
// var p = d3.select("body").selectAll("p");
// // p.datum("Thunder").append("span").text(function(d, i) {
// // return d + " " + i;
// // }); // var dataset = [{"id":1, "name":"张三"},
// {"id":2, "name":"张三2"},
// {"id":3, "name":"张三3"},
// {"id":4, "name":"张三4"}];
// var update = p.data(dataset); // update.text(function(d) {
// return d.id + "--" + d.name;
// }); // update.enter().append("p").text(function(d) {
// return d.id + "--" + d.name;
// }); // var condiv = d3.select(document.getElementById("con")); // condiv.selectAll("span").data(dataset).enter().append("span").text(function(d) {
// return d.id + "---" + d.name;
// }); // var numbers = [12, 23, 25, 67, 5, 26, 19, 8];
// console.log(d3.min(numbers, function(d) {return d * 3;}));
// console.log(d3.max(numbers));
// console.log(d3.extent(numbers, function(d) {
// return d % 3;
// }));
// console.log(d3.sum(numbers)); // console.log(d3.mean(numbers)); // console.log(d3.median(numbers));
// console.log(numbers.sort(d3.ascendind));
// console.log(d3.quantile(numbers, 19.0));
// p.data(dataset, function(d) {return d.id;}).text(function(d) {
// return d.id + " " + d.name;
// });
// console.log(update);
// console.log(update.enter());
// console.log(update.exit()); // console.log(p);
var dataset = [30, 45, 23, 69, 160, 55, 99];
var chart01 = d3.select(document.getElementById("chart01"));
var width = 800;
var height = 400;
var padding = {"top": 20, "right": 20, "left": 20, "bottom": 20};
var rectStep = 55;
var rectWidth = 45; var svg = chart01
.append("svg")
.attr("width", width)
.attr("height", height); var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "steelblue")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
}); var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
})
.attr("dx", rectWidth/2)
.attr("dy", "1em")
.text(function(d) {
return d;
}); function redraw(dataset) {
var updateRect = svg.selectAll("rect").data(dataset);
var enterRect = updateRect.enter();
var exitRect = updateRect.exit(); var updateText = svg.selectAll("text").data(dataset);
var enterText = updateText.enter();
var exitText = updateText.exit(); updateRect.attr("fill", "steelblue")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
}); enterRect.append("rect")
.attr("fill", "steelblue")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
}); exitRect.remove(); updateText.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) {
console.log("de-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
})
.attr("dx", rectWidth/2)
.attr("dy", "1em")
.text(function(d) {
return d;
}); enterText.append("text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) { console.log("d-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
})
.attr("dx", rectWidth/2)
.attr("dy", "1em")
.text(function(d) {
return d;
}); exitText.remove();
} function myadd() {
dataset.push(Math.floor(Math.random() * 100));
console.log(dataset);
redraw(dataset);
} function mysort() {
dataset.sort(d3.ascending);
redraw(dataset);
}
</script>
</body>
</html>
d3.js <一>的更多相关文章
- D3.js学习（七）
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js部署node环境开发
总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...
- d3.js读书笔记-1
d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- [资料搜集狂]D3.js数据可视化开发库
偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...
- D3.js 用层画条形图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
随机推荐
- g++
用g++编译程序时,-l 与-L各是什么意思?还有-I -l 表示:编译程序到系统默认路进搜索,如果找不到,到当前目录,如果当前目录找不到,则到LD_LIBRARY_PATH等环境变量置顶的路进去查找 ...
- Dispatcher
Dispatcher是guava EventBus的事件分发器. Dispatcher是抽象类, 抽象方法: abstract void dispatch(Object event, Iterator ...
- MYSQL中 ENUM、SET 类型(建议用tinyint代替)
ENUM类型 ENUM 是一个字符串对象,其值通常选自一个允许值列表中,该列表在表创建时的列规格说明中被明确地列举. 在下列某些情况下,值也可以是空串("") 或 NULL: 如果 ...
- WINHEX 使用教程
Winhex有完善的分区管理功能和文件管理功能,能自动分析分区链和文件簇链,能对硬盘进行不同方式不同程度的备份,甚至克隆整个硬盘:它能够编 辑任何一种文件类型的二进制内容(用十六进制显示)其磁盘编辑器 ...
- dzzoffice应用如何安装
在dzz应用市场中,进入到每个应用的详细介绍页面.里面有对于每个应用或者主题的安装说明. dzz应用市场:http://dev.dzzoffice.com/index.php?mod=dzzmarke ...
- WebGoat学习——跨站请求伪造（Cross Site Request Forgery (CSRF)）
跨站请求伪造(Cross Site Request Forgery (CSRF)) 跨站请求伪造(Cross Site Request Forgery (CSRF))也被称为:one click at ...
- BITED数学建模七日谈之三：怎样进行论文阅读
前两天,我和大家谈了如何阅读教材和备战数模比赛应该积累的内容,本文进入到数学建模七日谈第三天:怎样进行论文阅读. 大家也许看过大量的数学模型的书籍,学过很多相关的课程,但是若没有真刀真枪地看过论文,进 ...
- Canvas 2D绘制抗锯齿的1px线条
当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Can ...
- 【EasyUI】Combobox的联动和onChange/onSelect事件绑定
[效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.H ...
- 【128】Word中的VBA
通过查找关键字,然后删除整段文字的实现! Sub 删除查找含关键词的行() Dim KeyWord As String KeyWord = InputBox("请输入关键词(词长不限,中英均 ...