七 D3
2020-07-22 本文已影响0人
十丈_红尘
← zrender
D3（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。
D3 的案例
D3 是一个较为复杂的图形库，如果想入门 D3 可以从 这里开始
入门案例：数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<p>Vue</p>
<p>React</p>
<p>Agular</p>
<button id="datum">datum</button>
<button id="data">data</button>
<script>
var body = d3.select("body");
var p = body.selectAll("p");
function doDatum() {
// datum
var str = "Framework";
p.datum(str);
p.text(function(d, i) {
return `${d}-${i}`;
});
}
function doData() {
// data
var dataset = ['Vue', 'React', 'Agular'];
p.data(dataset)
.text(function(d, i) {
return `${d}-${i}`;
});
}
document.getElementById('datum').addEventListener('click', function(e) {
doDatum();
});
document.getElementById('data').addEventListener('click', function(e) {
doData();
});
</script>
</body>
</html>
进阶案例：思维导图
一个非常不错的 D3 入门案例：如何绘制思维导图，案例源码点击这里下载
