D3.js from getting started to the "Discard" guide

Preface

Recently a little bit of things are not smooth, while slightly more idle, play d3.js. Before the actual project is mainly using a variety of charts such as Hightchart, Echarts, and so on, these graphics library play up is perfect, everything can be configured, but a few years ago, after contact with the D3, I think the chart of the first class library limitations is that the basic can not be customized; and D3, you decide, You want to draw what kind of figure, you decide, freedom is very big, at that time a bit of worship and admiration, little play a few, did not sink the heart to concentrate to play, at that time felt really difficult. Do not understand, also do not see in.

The latter was contacted by react, Redux, and was exposed to functional programming . Again back to the new ramming D3, feel not so difficult, D3 actually also a bit of functional programming ideas. Do not be the title scare run ha, down-to-earth add perseverance D3 should also be able to get started.

Crap not much to say, the first to let you counter-day data visualization, point I see the online effect

D3.js Foundation

2. Understanding SVG Graph Graphing
   

   Why do you want to learn SVG diagram? Because D3.js is called the jquery in SVG, of course, if you want to use D3 output canvas map can also, but SVG diagram operation more flexible, more convenient debugging, debugging in Chrome can let you fly up.

4. Learn the grammar of D3.js
   

   Grammar is required, it is recommended to go to the official website to learn its grammar, or borrow/buy a book to synchronize learning, first try to achieve simple graphics, if you can best understand the functional programming curry and compose thought, do not recommend to start to contact the large number of online demo, It will be easy for you to fall into the abyss, really from the introduction to give up.

5. Programming Ideas for learning D3.js
   

   1) grammar can actually embody its programming ideas, the start of course is to learn its powerful selector , below feel

   D3.select ("Body"). Style ("Background-color", "Black");  // direct selection, and set properties function // Dynamic Setting Properties  , select return "HSL (" + math.random () * + ", 100%,50%)";}); D3.selectall (///  Select bind data--Dynamic set properties  . Data ([4, 8, +, +, +])    . Style (functionreturn D + "px"; });

   2) then the idea of understanding Update,enter and Exit

   //Update ...varp = d3.select ("Body")//The data is directly bound 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) {returnD;});//Enter ... [Common]P.enter (). Append ("P")//if inconsistent, the number of elements in the array is more than the P node, insert p node to complement and update the text accordingly. Text (function(d) {returnD;});//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 // Defining animations    // The duration of the animation    . Delay (functionreturn//  element Animation How long it takes to start    function  return//  set final effect

D3.js Combat Project

Note: The following code because the combination of react,javascript use is the ES6,D3 version is the latest V4 version, not familiar with the self-reinforcing foundation.

First, D3 implementation of a simple histogram [online demo][source code]

Second, D3 realization simple simple area chart [online demo][source code]

 Three, D3 realization simple Simple pie chart, doughnut chart [online demo][source code]

 Iv. D3 Implement radial stack histogram [online demo][source code]

 Five, D3 realization simple chord chart [online demo][source code]

 Six, D3 implementation of simple packaging diagram [online demo][source code]

 Vii. D3 Realization of radar chart [online demo][source code]

 viii. D3 Realization Force Guide Chart [online demo][source code]

 ix. D3 Realization of China map [online demo][source code]

Communication and Learning

1. This article Nelson Kuang, alias: Fast Mover Welcome message and more advice
2. GitHub Address: Https://github.com/nelsonkuang/ant-admin
3. Copyright NOTICE: Welcome Reprint study = Please mark information from http://www.cnblogs.com/fastmover/p/7779660.html

D3.js from getting started to the "Discard" guide