D3js | web

# D3js

D3js: Data-Driven Documents

D3.js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助使用 HTML、CSS、SVG 以及 Canvas 来展示数据。D3.js 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作

D3的设计,类似jquery，如某个属性传值是set不传是get传值,也可以采取函数操作，更方便灵活.

注意：jquery的参数与d3参数的区别

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Simple D3 Dev Env</title>
    <script type="text/javascript" src="d3.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class="k1">333</div>
	<div class="k1">333</div>
</body>
</html>
<script type="text/javascript">
	$(".k1").html(function(i,d,k1){
		console.log(i,d,k1)
		return 12
	})
	
	//0 "333" undefined
	//1 "333" undefined
	d3.selectAll(".k1").html(function(d,i,v1){
		console.log(d,i,v1[i].innerHTML)
		return 13
	})
	//undefined 0 12
	//undefined 1 12	
</script>

D3流程图
D3思维导图
D3动画
D3特效
D3数据可视操作

# D3新版本v6/v5与老版本v3区别

选择器中方法除去以前对象的写法

d3.select("svg").selectAll('text')
.attr({
	x: '20',
	y: function (d, i) { return 20 + 20 * i; }
})

call中的this之前版本可以将调用者传过去现在指向window

function fill(ele, fill,arg) {
	console.log(this)
	this.style("fill", fill);
}
rect.call(fill, "orange");
circle.call(fill, "tomato");

category20函数被新版本弃用

var color=d3.scale.category20();

v3版本无interrupt函数，v4以上支持

//新版本
d3.select('svg').select('circle').interrupt();

v3版本获取dom元素和v6版本不一样

//v6版本
var s=d3.select("#k1")._groups[0][0]//<div id="k1">111</div>
//v3版本
var s=d3.select("#k1")[0][0]

v3v4v5版本支持mouse,v6不支持

d3.mouse(d3.select("body")._groups[0][0])//返回横纵坐标的数组[x,y]

d3.event d3.touch d3.touches在v6版本全部移除
d3过渡

//v3版本支持的"circle"等基本字符串类型移除
.ease("circle")//v4版本以上不支持了
.ease(d3.easeCircle)//大部分变通到d3上的一个参数

d3数组移除d3.nest d3.keys d3.values d3.entries d3.set([array])在v6版本被移除
d3伪随机数生成器在v4版本全部移除(d3.random.normal([mean, [deviation]])/ d3.random.logNormal([mean, [deviation]])/d3.random.bates(count)/d3.random.irwinHall(count))
d3.transform在v4版本已被移除
d3.xhr v4版本移除
d3.requote d3.round v4版本移除

d3选择器 →