The basic usage of d3.js plus a slightly naughty demo

A few days ago to see someone in the community posted a comparison of three more mainstream chart plug-ins, we all have a heightcharts love, but no good director of personal hobbies D3 more, so my chart for the first time so gave D3

This is a chart I made with d3+react, but because of the extensibility is not very good, do not stick to the source code.

http://yansm.github.io/react-d3-test/

D3 learning curve is indeed some bad, the key is the API to the mess, it is better to see the demo to understand, but also let people have a sense of retreat.

In fact, D3 is not a graph plug-in, he is more like the operation of SVG "jquery", so he used the SVG coordinate system and thought also let writing things very difficult to master.

Let's take a simple example to illustrate some of his main APIs.

A chart axis is the most common part, but D3 's most disgusting place is also the axis.

First, an axis needs to be composed of a scale, this scale is also when you do the content to locate the need, this scale with the data you transmit to determine. So your axes and your chart content are actually based on this scale.

And a scale has two data to build, one is the scope of the data and your spatial range, your data range is your x-axis data of the maximum value to the minimum, the space is the size of your chart, such as your width is 600, then your spatial range is 0-600,

And the data range has two methods to decide, one is D3 the extents method, you just give the array to him OK he will give you the maximum value or the minimum value, but if your minimum value of different needs such as the need for him 0, So just use D3.max or d3.min, and give him the same array, and he'll give you the maximum or minimum value.

1. var yextents = [0, D3. Max( data_1. Map(function (e) {
2. return yaccessor(e);
3. }))]

Similar to this can be.

The same scale of your scale can also be generated.

1. var yscale = D3. Scale. Linear()
2. . domain(yextents)
3. . range([0]);

The axes here are divided into orgin,linear and time of the three kinds, called commonly used are the latter two kinds. The latter two require domain and range two parameters.

And you have the scale, you can achieve the axis.

1. var yaxis = D3. SVG. Axis()
2. . Scale (yscale)
3. . Orient(' left ');

Axes are also two properties, one is your scale ruler, one is the direction, top,bottom,left,right these four kinds.

Scale also have other, such as color. The same two range can be used as the output of a numeric value.

We then take the histogram as an example to tell the composition of a table.

Histogram, each bar is an SVG rect, you need to give him 5 attributes, X,y,width,height,fill.

At the time of composition you need to

Select all the rect first

1. Barsvg
2. . selectall(' rect ')

And then insert the data

. Data (data)

When the data generates a new RECT, it is necessary to

1. . enter(). Append(' rect ')

Gets the new data and then generates the corresponding rect. For redundant rect, you can use Exit () to manipulate it.

Width you need to be based on the number of data, you can also use the way he gives, this he gave the way I forget, the API is too messy to find ...

2. . attr(' width ', + /length/2)
6. .. attr(' height ', function(d) {
10. return - yscale(yaccessor(d));
14. })

You can put a constant or function in every attr, this time you use the scale, you give your scale a y-axis value of the parameter, he returned to you a corresponding length.

The same x and y coordinates can be calculated as well.

2. . attr(' x ',function (d) {
4. return XScale(xaccessor(d));
6. })
8. . attr(' y ', function (d) {
10. return yscale(yaccessor(d));
12. })

If you like to add animations, just add Transition () and duration () and delay.

D3 supports chained operation, even more powerful than jquery, you can animate it into your chain, and then increase the deformation in subsequent operations.

A simple diagram is basically like this, there is a tutorial below you can be further familiar with.

In fact, D3 is not so difficult, you have to master the Main method can control him, perhaps the most poignant is that you think to find is a given data can return the results of the plug-in, but he gave you the knowledge of a framework by which you add functionality ...

Code run and Play online address: http://www.gbtags.com/gb/rtreplayerpreview/1095.htm

Original link: http://www.gbtags.com/gb/share/5729.htm

The basic usage of d3.js plus a slightly naughty demo