D3.js General Display

Recently, we have been studying some visualization of the network diagram of the social members, visualizing the big data this desert helpless himself, fortunately found D3 this vibrant oasis, I decided to be greedy in this treasure to feast.

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 .

Introduction D3 's Chinese books now only "data visualization-using D3 Design Interactive Chart", interested people can see

Advantages :

Unlike other JS implementations of mapping, 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 the SVG histogram in the corresponding y-coordinate binding, if the elements of the array is set to random variables, timing changes, then you see the histogram will also be the changing dynamic graph effect. In addition, he is able to accept large amounts of data visualization and dynamic updates.

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

You can find a lot of examples on GitHub, D3 's flexibility, its random binding data and elements, and a nice, dynamic display that will surely surprise you.

Use:

D3 Use, need to introduce d3.v3.min.js or d3.js, you can go to GitHub to download the latest D3 JS compressed version, you can also through the HTTP link in the Web page to introduce D3

The key code is as follows:

the path in the code can also be changed to the local path after you download the D3.

The following is a general description of the code syntax usage by comparing 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, the code is as follows:

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

Dynamic ( Dynamics property)

Friends who are familiar with DOM frameworks like jquery or prototype will soon be aware of their similarities with D3. However, in D3, styles, properties, and other properties can be set to variable data for functions, not just simple constants. Despite their simplicity, these functions are surprisingly powerful.

The following example side to illustrate, or the above name is the P tag object operation, now let them randomly change the color:

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

let them change colors according to the parity

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

And then we'll talk about his binding to the data , the D value of the above function, which is the bound data volume reference .

computed 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, if you bind an array of data segment elements, you can use this data 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, if the amount of data is large and you need to load the file, here are a few ways to load the data file :

XML loading

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

JSON loading

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

The file may not have a suffix name.

The above code mainly describes the properties of the selected object set operation, below, let us look at the overall object settings, additions and deletions are how to do

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

in syntax, the use of chained notation, the operation of an object can be used "." To connect.

The basic format is discussed here, the following article will describe how to use D3 to show how we want to see the data effect, how to achieve the cluster display of data, how to achieve network connection between nodes, how the node attribute data display, all kinds of graphic drawing, Map information how to draw a deployment node and so on please look forward to

D3.js Overall display