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

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

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>