D3.js starting with the creation of P elements (display loadable data) _javascript tips

D3 is a visual JS library based on data manipulation, and the understanding of D3 can be discussed from the most basic display of loadable data.

The basic framework of HTML is not much said, the first code to explain:

Create a new test directory under which the demo and D3 two folders are created. Demo to store the HTML file to write, D3 storage D3.v3.js

Under the Demo folder, create a new indexp.html, copy the following code, double-click on the browser to open the viewing effect.

<! DOCTYPE html> 
 
 

This simple demo implementation function: Add the P tag in the body, add the D3 loaded text content in the P tag, and adjust the text color according to the function setting condition.

The above page code, the body inside the JS code, is to show the data operation of the page. Many examples in the future, as long as the modification of this piece can be, other parts can be seen as the page frame.

Here the content of the article is generally mentioned, the use of D3 consonant, the same object of the step-by-step data operation to connect, easy to maintain.

D3.select ("Body") selects the body element and consonant to the next method

. SelectAll ("P") Select all paragraphs

The. Data (dataset) resolves to load the array data, which is 5, and each subsequent method of consonant executes five times, followed by the array subscript to perform a method operation on the array elements

. Enter () creates a placeholder element for the new bound data (equivalent to creating a temporarily unknown label of 5).

The number of created depends on the number of existing tags selected and the length of the array of data loaded.

If, in this case, the P tag in the body is less than 5, it is created (now P is 0 in the body, so 5 are created),

More than no creation, the final placeholder element and P element total number is 5.

. Append ("P") changes the placeholder element to P element

. text (function (d) {}) to display the contents of each paragraph, write an anonymous function control, and generally return a string. In this way you can write arbitrarily,

This example lets him output I can count up to plus the corresponding array element value per paragraph

The function format is fixed and a function (d) is the only way to load data into a function.

. Style ("color") sets the text color properties of the CSS, as with text, the set string can perform the action you want with the function. In this example, if the paragraph corresponds to an incoming value greater than 15, the row is flushed

Finally, we see the effect as shown in the figure:

This article describes how to draw a circle in SVG, and the simple use of circular circles