Home > Article > Web Front-end > D3.js starts with the creation of the P element (showing loadable data)_javascript tips

D3.js starts with the creation of the P element (showing loadable data)_javascript tips

WBOYOriginal: 2016-05-16 16:32:361420browse

D3 is a visual js library based on data operations. To understand d3, let’s start with the most basic display of loadable data.

I won’t go into details about the basic framework of html, let’s start with the code and then explain:

Create a new test directory and create two folders, demo and d3, in this directory. demo stores the html files to be written, and d3 stores d3.v3.js

Create a new indexP.html in the demo folder, copy the following code into it, double-click it to open it in the browser to see the effect.

<!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: add a p tag to the body, add the text content loaded by d3 to 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 the data operations displayed on the page. For many examples in the future, you only need to modify this part, and the other parts can be regarded as page frames.

The content here is generally discussed in the previous article. Use d3 concatenation to connect step-by-step data operations on the same object for easy maintenance.

d3.select("body") selects the body element and connects it to the next method

.selectAll("p") selects all paragraphs

.data(dataset) parses and loads array data. The length of the array is 5. Each subsequent method will be executed five times. Method operations are performed on the array elements in sequence according to the array subscript

.enter() creates a new data-bound placeholder element (equivalent to creating 5 temporarily unknown tags).

The number of created tags is determined by the number of existing tags selected and the length of the loaded data array.

As in this example, if there are less than 5 p tags in the body, create them (there are 0 p tags in the body now, so 5 are created),

If there are more than one, it will not be created. The total number of final placeholder elements and p elements must be 5.

.append("p") changes the placeholder element to a p element

.text(function(d) {}) Write an anonymous function to control the display content of each paragraph, usually returning a string. You can write whatever you want in this method,

This example allows him to output I can count up to plus the corresponding array element value for each paragraph

The function format is fixed. Only in this way can function(d) load data into the function.

.style("color","") sets the text color attribute of css. Just like text, the set string can be used to perform the operations you want using function. In this example, if the incoming value corresponding to the paragraph is greater than 15, the line will be turned red

Finally, the effect we see is as shown below:

That’s it for this article. The following will introduce how to draw a circle in SVG, as well as a simple force diagram of connecting circles

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use JS to implement jQuery’s addClass, removeClass, and hasClass functions_javascript skillsNext article：Use JS to implement jQuery’s addClass, removeClass, and hasClass functions_javascript skills

See more

D3.js starts with the creation of the P element (showing loadable data)_javascript tips

Related articles