D3.js v5 Tutorials
D3.js v5 Tutorials
D3.js v5 教程
https://github.com/d3/d3/blob/master/API.md
CHANGES
https://github.com/d3/d3/blob/master/CHANGES.md
0xfffff
& .toString(16)
16 进制转换
d3-scale
https://github.com/d3/d3-scale#installing
# d3 global is exported
$ npm i -S d3-scale
let x = d3.scaleLinear();
ordinal-scales
https://github.com/d3/d3/blob/master/API.md#ordinal-scales
创建一个序数带尺度
https://github.com/d3/d3-scale/blob/master/README.md#scaleBand
continuous-scales
https://github.com/d3/d3/blob/master/API.md#continuous-scales
创建一个定量线性标度
https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear
// d[0] & d[1]
// d.key & d.value
let Xdatas = data.map(d => d.key),
Ydatas = data.map(d => d.value);
let width = 800,
height = 500;
// x-Axis 轴 scale range
let x = d3.scaleBand()
.domain(Xdatas)
.rangeRound([0, width])
.padding(0.1);
// y-Axis 轴 scale range
let y = d3.scaleLinear()
.domain([0, d3.max(Ydatas)])
.rangeRound([height, 0]);
let padding = {
left: 50,
top: 20,
right: 50,
bottom: 50
};
what's new
- Promise & Async Await & Fetch AP
- ES6 module
https://github.com/d3/d3/releases
https://d3js.org.cn/
https://d3js.org.cn/introduce/
refs
http://www.manongjc.com/article/29914.html
https://blog.csdn.net/qq_34414916/article/details/80032731
https://github.com/mp2930696631/d3.js-demo/blob/master/d3.js-demo/testD3_chp9_1.html
D3.js & v4
big break changes
https://github.com/d3/d3/releases/tag/v4.0.0
D3.js & v3
big break changes
https://github.com/d3/d3/releases/tag/v3.0.0
https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
viewBox & preserveAspectRatio
layout responsive
<svg id="chart" width="960" height="500"
viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/10523917.html
未经授权禁止转载,违者必究!