How to learn D3.js

Vue is the front-end framework for a data-driven view that can be used as a reusable component

D3 is the data visualization JavaScript library

D3.js Foundation

1. learn the grammar of D3.js

Grammar is required, it is recommended to go to the official website to learn its grammar, if possible, it is best to understand the functional programming curry and compose thought, do not recommend to start to contact the large number of online demo.

2. Learning D3.js Programming Ideas

　(1) Grammar can actually embody its programming ideas, the start of course is to learn its powerful selector:

D3.select (' body '). Style (' Background-color ', ' black ')

Direct selection, and set properties

D3.selectall (' P '). Style (' Color ', function () {

Dynamic setting properties, select

Return ' HSL (' + math.random () * 360 + ', 100%, 50%) '

})

D3.selectall (' P '). data ([4,8,15,16,23,42]). Style (' Font-size ', function (d) {

Dynamic setting properties, binding data, and select

return D + ' px '

})

(2) Next is the idea of understanding update, enter, and exit

Update ...
var p = d3.select ("body")//directly bind the data to the DOM and output, the number of elements of the array and the number of P-nodes consistent with all the updated text, if not consistent, only update the existing P-node text, the extra data will be saved, see below will be used
. SelectAll ("P")
. data ([4, 8, 15, 16, 23, 42])
. text (function (d) {return D;});

Enter ... Common
P.enter (). Append ("P")//if inconsistent, the number of array elements is more than the P node, insert p node to complement and update the text accordingly
. text (function (d) {return D;});

Exit ... Common
P.exit (). remove (); If not, the number of elements in the array is less than the P node, removing the redundant P-nodes

(3) then to learn D3 drawing general ideas , such as to draw a line chart, then we:

Convert the input raw data into standard D3 acceptable data formats-Define x-axis functions, y-axis functions, and well-defined mapping methods (such as D3.line) in SVG, draw the x-axis y-axis from the original data, and combine the x-axis and y-axis functions with the original data. and draw the details of the title.

(4) Finally, add animation to the finished graphic

A graphic that doesn't have an animated effect will look tedious. The animation is written in the following basic notation:

Change the radius of all circles D3.selectall ("Circle"). Transition ()//Define animation    . Duration (750)//animation duration    . delay (function (d, i) { return I * 10; })//Element animation How long will the delay begin    . attr ("R", function (d) {return math.sqrt (d * scale);});//Set Final effect

How to learn D3.js