D3 is a visual js library based on data operations. To understand d3, we start with the most basic display of loadable data.
I won’t say much about the basic framework of html, I will first put the code and then explain it:
Create a new test directory and create two folders demo and d3 under this directory. demo stores the html file to be written, and d3 stores d3.v3.js
Create a new indexP.html under the demo folder, copy the following code, and double-click to open the effect in the browser.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Setting paragraphs' style conditionally, based on data</title> <script type="text/javascript" src="../d3/d3.v3.js"></script> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return "I can count up to " + d; }) .style("color", function(d) { if (d > 15) { //Threshold of 15 return "red"; } else { return "black"; } }); </script> </body> </html>The functions implemented by this simple demo are: add p tags to the body, add the text content loaded by d3 in the p tag, and adjust the text color according to the function setting conditions.
The above web page code and the js code in the body are data operations displayed on the page. For many examples in the future, just modify this part, and other parts can be regarded as page frameworks.
The previous article here generally talks about using d3 conjunction to connect step-by-step data operations of the same object for easy maintenance.
d3.select("body") Select the body element and concatenate it to the next method
.selectAll("p") Select all paragraphs
.data(dataset) parses the loading array data. The length of the array is 5. Each method concatenated will be executed five times in the future. Perform method operations on the array elements in sequence according to the array subscript.
.enter() creates a new placeholder element for bound data (equivalent to creating 5 temporarily unknown tags).
The number of created numbers should be determined based on the number of selected existing tags and the length of the loaded data array.
As in this example, if there are less than 5 p tags in the body, it will be created (now p in the body is 0, so 5 are created).
If there is more than it is not created, the total number of the last placeholder element and p element must be 5.
.append("p") Change the placeholder element to a p element
.text(function(d) {}) Write an anonymous function to control the display content of each paragraph, generally returning a string. In this method you can write it anyway.
This example lets him output I can count up to each paragraph plus the corresponding array element value
The function format is fixed. Only in this way can the data be loaded into the function.
.style("color","") Sets the text color attribute of css. Like text, the set strings can be performed with function to perform the operations you want. In this example, if the corresponding incoming value of the paragraph is greater than 15, the line will turn red
Finally, the effect we see is as shown in the figure:
This article ends with this article. The following is how to draw circles in SVG and a simple force diagram connecting circles.