D3.js starting from the creation of the P element

D3 is a visual JS library based on data operation, understanding D3, from the most basic display can be loaded data talk about.

The basic framework of HTML is not much to say, first the code again explained:

Create a new test directory that creates a demo and D3 two folders in this directory. Demo store the HTML file to be written, D3 store D3.v3.js

Create a new indexp.html under the Demo folder, copy the code below, and double-click the browser to open the view.

<! DOCTYPE html>

This simple demo implements the function of adding a P tag to the body, adding D3 loaded text content to the P tag, and adjusting the text color according to the function setting criteria.
The above page code, body inside the JS code, is to show the data operation of the page. After a lot of examples, as long as you modify this piece can be, other parts can be seen as page frame .
Here the content of the previous article is generally discussed, using the D3 concatenating, the same object of the step-by-step data operation to connect, easy to maintain.
D3.select ("Body") selects the BODY element and concatenating to the next method
. SelectAll ("P") Select all paragraphs
The. Data (dataset) parses the loaded array data, which is 5, and each method of concatenating will be executed five times, followed by array subscripts to perform method operations on array elements
. Enter () creates a placeholder element for the new bound data (equivalent to creating a temporary unnamed label of 5).
The number of created depends on the number of existing tags selected and the length of the data array being loaded.
In this case, if the P tag in the body is less than 5, it is created (now the body p is 0, so create 5),
More than is not created, the final placeholder element and the total number of P elements to be 5.
. Append ("P") changes the placeholder element to P-element
. text (function (d) {}) writes an anonymous function control to the display of each paragraph, typically returning a string. In this method you can write arbitrarily,
This example lets him output I can count up to plus the corresponding array element value in each paragraph
The function format is fixed, and functions (d) are the only way to load data into a function.
The. Style ("Color", "") sets the text color property of the CSS, and as with text, the set string can be used to perform the action you want. In this case, if the passed-in value of the paragraph is greater than 15, the line becomes red
Finally, the effect we see is

 
 

  
  
 
   
 
 
  
 
 
This article describes here, how to draw a circle in SVG, and the simple use of a circle connected
D3.js starting from the creation of the P element