D3.js v5 Tutorials

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

2. Promise & Async Await & Fetch AP
3. 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​​

​​javascript:void(0)​​

​​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

​​https://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive​​

<svg id="chart" width="960" height="500"
viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>