D3.js General Display Article __js

A recent period of time to study the social members of the network diagram of some visual display, to the large data visualization of the desert helpless themselves, fortunately found D3 this vibrant oasis, I decided in this treasure place greedy for a feast.

This article introduces mainly from the official website translation and after the user uses the Feeling data collection

D3.js is a JavaScript library that manipulates data (primarily for large data) to visualize it.

D3 can display data using techniques such as HTML, SVG, and CSS. The popular point, is the webpage cartography, produces the interactive graph .

Introduction D3 Chinese books now only "data visualization combat-use D3 Design Interactive Chart", interested you can see

Advantages :

Unlike other JS implementations of cartography, D3 is an API for manipulating data. It binds data to Web page SVG, and when your data changes, the chart synchronizes updates. For example, a data array and SVG histogram in the corresponding y-coordinate binding, if the element of the array is set to random variables, timing changes, then you see the histogram will also be the changing dynamic diagram effect. In addition, he can accept the massive data visualization display and the dynamic update.

D3 can efficiently manipulate large data documents (mostly in JSON format) and support dynamic interaction and animation effects of large datasets. D3 's design style allows the use of code duplication, in the context of different plug-ins or components.

You can find many examples on GitHub, the flexibility of D3, the random binding of data and elements, and the display of beautiful, dynamic effects that will surprise you.

Use:

D3 use, you need to introduce d3.v3.min.js or d3.js, you can go to GitHub download the latest D3 JS compression version, or 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 replaced by the local path after you download the D3.

The following compares the traditional JS writing, to its code syntax usage do general introduction:

selections (checked object)

The traditional writing document gets the object change and sets its color, so big lump 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);  
}  

Using D3 to achieve the above effect

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

Yes, you are not mistaken, it is so simple.
Of course, if necessary, you can also take out a single object to set it up, the code is as follows:

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

Dynamic ( Dynamic Properties)

Friends who are familiar with the DOM framework such as jquery or prototype will soon be aware of their similarities with D3. However, styles, properties, and other properties in D3 can be set as variable data for a function, not just a simple constant. Despite their simplicity, these functions are surprisingly powerful.

Next to the example side of the description, or the above name is the P tag object operation, now let them randomly change color:

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

Let them change color according to the parity

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

Let's talk about his binding to the data, the D value of the function above, the reference to the bound data quantity.

Computed properties often refer to bound data. The data is specified as the value of an array, and each value is passed as the first parameter (d) to select the 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 are binding an array of data segment elements, you can use that data to compute the dynamic font size:

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

You can also take the array separate out.

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

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

In addition, if there is a large amount of data to load, there are several ways to load data files:

XML load

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

JSON load

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

The file can be without a suffix name.

The above code mainly describes the properties of the selected object settings operation, below, let us look at the whole object settings, additions, and deletionsHow did they do that?

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 basic format is mentioned here, the following article will introduce how to use D3 to show what we want to see the data effect, how to achieve the data clustering display, how to achieve network connections between nodes, node attribute data display, all kinds of graphics, map information how to draw deployment nodes and so on, please look forward to