D3.js Overview

D3.js Overview

Recently, I have studied some visual presentations on the network relationship diagrams of social members. I am unable to grasp the big data visualization of this desert. Fortunately, I found D3, a vibrant oasis, I decided to have a greedy dinner on this treasure.

This article mainly introduces how to collect the translation information from the official website and users' feelings after use.

D3.js is a JavaScript library that operates data (mainly targeting big data) to achieve visualization.

D3 can display data using HTML, SVG, CSS, and other technologies. In layman's termsWeb page drawing to generate an interaction Diagram.

The Chinese book about D3 is now available only in "data visualization practices-designing interactive charts using D3". If you are interested, please refer to it.

Advantages:

Different from other js plotting methods, D3 is an API for data operations. it binds the data with the SVG on the webpage. When your data changes, the chart is updated at the same time. For example, if a data array is bound to the y coordinate of the SVG column chart, if the element of the array is set to a random variable, it changes regularly, the bar chart you see will also be a dynamic graph with changing effects. In addition, he can visualize and dynamically update massive data.

D3 can efficiently operate big data documents (mostly in json format) and support dynamic interaction and animation effects of large datasets. D3 design style allows repeated code, with the help of different plug-ins or components.

You can find many examples on github. The flexibility of D3, its random binding of data and elements, and the presentation of beautiful movable effects will surprise you.

Usage:

To use D3, You need to introduce d3.v3. min. js or d3.js. You can download the latest D3 js compression version from github, or introduce D3 to webpages through http links.

The key code is as follows:

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

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

Next, we will give a general introduction to the syntax usage of the Code by comparing the traditional JavaScript code:

Selections (selected object)

In traditional writing, document gets the object change and sets its color. This is a huge amount 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 are not mistaken. It is so simple.
Of course, you can set a single object when necessary. The Code is as follows:

d3.select("body").style("background-color", "black");

Dynamic ( Dynamic attributes)

Friends who are familiar with DOM frameworks such as jQuery or Prototype will soon be aware of their similarities with D3. However, in D3, styles, attributes, and other attributes can be set to variable data of the function, not just simple constants. Despite their simplicity, these functions are surprisingly powerful.

The following example illustrates whether the above name is an object operation of the p tag. Now we want them to randomly change the color:

d3.selectAll("p").style("color", function() {    return "hsl(" + Math.random() * 360 + ",100%,50%)";  });  

Let them change colors based on parity

d3.selectAll("p").style("color", function(d, i) {    return i % 2 ? "#fff" : "#eee";  });  

Next, let's talk about hisData BindingThe D value passed by the function above is the bound data volume reference.

Computing properties often reference bound data. Data is specified as the value of an array. Each value is used as the first parameter to pass (d) the selection function. Use the default join-by-index, the first element in the data array is passed to the first node selection, the second element to the second node, and so on. For example, if you bind an array data segment element, you can use the data to calculate the dynamic font size:

d3.selectAll("p")      .data([4, 8, 15, 16, 23, 42])      .style("font-size", function(d) { return d + "px"; }); 

You can also take out the array separately.

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

d3.selectAll("p")      .data(data)      .style("font-size", function(d) { return d + "px"; }); 

In addition, if the data volume is large and files need to be loaded, the following methods are provided to load data files:

XML Loading

D3.xml ('example ', 'image/svg + xml', function (error, data) {if (error) {console. log (' An error occurred while loading the SVG file! ', Error);} else {// process SVG file }});

Json Loading

d3.json("miserables.json", function(error, graph) {  }

You can leave the file without a suffix.

The code above mainly introduces the attribute setting operation of the selected object. Let's take a look at it as a whole. Setting, adding, and deleting objectsHow is it done?

var p = d3.select("body").selectAll("p")      .data([4, 8, 15, 16, 23, 42])      .text(String);    // Enter…  p.enter().append("p")      .text(String);    // Exit…  p.exit().remove();

In terms of syntax, you can use a chain to connect operations on an object.

Here is the basic format. Later, we will introduce how to use D3 to show the data effects we want to see, we are waiting for you to know how to display data clustering, how to connect networks between nodes, how to display node attribute data, how to draw various types of graphs, and how to draw and deploy nodes on map information.