D3.js Overall Show article

A short time to study the social members of the network diagram of some visual display, the big data visualization of this desert helpless self, fortunately found D3 this vibrant oasis. I decided to have a greedy meal in this treasure-place.

This article introduces mainly from the official website translation and the user impression data collection after use

D3.js is a JavaScript library that manipulates data (primarily for big data) for visualization.

D3 can display data using techniques such as HTML, SVG, and CSS.

Popular point, is the Web page mapping, generate interactive diagram .

Introducing D3 's Chinese books is now only "data visualization in action-using D3 Design Interactive Chart", you are interested to see

Strengths :

and other JS implementation of the mapping method is different. D3 is an API for manipulating data. It binds the data to the Web page SVG, and when your data changes, the chart is updated synchronously.

For example, a data array and an SVG histogram corresponding to the y-coordinate binding. Assuming that the elements of this array are set to random variables, timing changes, then the histogram you see will also be a dynamic graph of changing effects.

In addition, he is able to accept large amounts of data visualization and dynamic updates.

D3 is able to efficiently manipulate big data documents (mostly in JSON format) to support dynamic interaction and animation of large datasets. D3 's design style agrees to use code repeatedly, with the help of different plugins or components.

On GitHub you can find very diverse examples, D3 flexibility, its arbitrary binding data and elements, and the beauty of the movable effects show will surely surprise you.

Use:

the use of D3. To introduce d3.v3.min.js or d3.js, you will be able to download the latest D3 JS compressed version number on GitHub, and also be able to introduce D3 in the Web via HTTP links

Key codes such as the following:

The path in the code can also be replaced with the local path after you download the D3.

The following is a general description of how the code syntax is used , in contrast to the traditional JS notation:

Selections (selected object)

Traditional document to get the object change and set its color, such a lump of code ...

。

var paragraphs = document.getelementsbytagname ("P");  for (var i = 0; i < paragraphs.length; i++) {    var paragraph = paragraphs.item (i);    Paragraph.style.setProperty ("Color", "white", null);  }  

use D3 to achieve the above effect

D3.selectall ("P"). Style ("Color", "white");

Yes, you're not mistaken, it's that simple.
Of course. If necessary, you can also take out a single object to set it, code such as the following:

D3.select ("Body"). Style ("Background-color", "Black");

Dynamic ( Dynamics property)

Friends who are familiar with DOM frameworks like jquery or prototype will be very quick to realize their similarities with D3. However, in D3, styles, properties, and other properties can be set as variable data for a function, rather than as simple constants. Although they are very simple, these functions are surprisingly powerful.

The following example indicates whether the above name is the object operation of the P tag. Now let them randomly change colors:

D3.selectall ("P"). Style ("Color", function () {    return "HSL (" + math.random () * + ", 100%,50%)";  });  

Let them change colors based on the parity

D3.selectall ("P"). Style ("Color", function (d, i) {    return I% 2?)
"#fff": "#eee";  });  

Next, let's talk about his binding to the data . The D value of the function passed above is the data volume reference of the binding

calculated properties often reference bound data. The data is specified as the value of an array, and each value is passed as the first parameter (D) selection function. Using the default Join-by-index, the first element in the data array is passed to the selection of the first node, the second element to the second node, and so on. For example, suppose you bind an array of data segment elements that you can use to calculate the dynamic font size:

D3.selectall ("P")      . Data ([4, 8, 15, 16, 23, 42])      

you can also take out the array separate.

var data = [4, 8, 15, 16, 23, 42, 12];

D3.selectall ("P")      . Data (data)      

In addition, assume that the data volume is very large, you need to load the file. Here are a few ways to load a data file :

XML onboarding

D3.xml (' example ', ' Image/svg+xml ', function (error, data) {    if (error) {        console.log (' Loading SVG file Error!
', error);    }    else {        //process SVG file    }});

JSON loading

D3.json ("Miserables.json", Function (error, graph) {  }

The file can be appended without a suffix name.

The above code mainly describes the properties of the selected object set operation, the following, let us look at the overall object settings, join and delete how to do it

var p = d3.select ("Body"). SelectAll ("P").      data ([4, 8, (+), [+]])      . Text (String);    Enter ...  P.enter (). Append ("P")      . Text (String);    Exit ...  P.exit (). remove ();

  in the syntax, the use of chain-style, the operation of an object can be used "." To connect.

       

      The span style= "font-size:14px" >  basic format is discussed here, and the following article describes how to use D3 in detail to show the data effects we want to see. How to realize the cluster display of the data, how to realize the connection between nodes, how to display the attribute data of the nodes, the drawing of various kinds of graphs, how to draw the nodes of the map information, etc. please expect

watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvcwl5dwv4dwvsyw5n/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast

      

D3.js Overall presentation