Home > Developer > Web Develop
The full name of D3 is (Data-driven documents), as the name implies, is a data-driven document. listen to the name a bit abstract, say simple, is actually a JavaScript function library, use it is mainly used to do data visualization.
D3 provides a variety of easy-to-use functions that greatly simplify the operation of JavaScript data. Since it is inherently javascript, it can do all the work with JavaScript, but it can significantly reduce your workload, especially in data visualization, where D3 has streamlined the complex steps of generating visualizations to a few simple functions, you just need to enter a few simple data, Can be converted to a variety of brilliant graphics.
first, use and installationD3 is a library of JavaScript functions and does not require "installation", which is commonly said. It has only one file, which can be referenced in HTML. There are two ways of doing this:
(1) Download the D3.js file
After decompression, the HTML file contains the relevant JS file can be.
(2) can also directly include links to the network, this method is simpler:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8 "></script>
But the use of the time to keep the network connection is valid, can not be used in the case of network disconnection.
second, with a small example of D3Use D3.js to modify the two lines of the P label, just add one line of code. Be careful not to forget to refer to the D3.js source file.
"Utf-8"> <title>HelloWorld</title> 1</p> <p>hello World2</p> <script src="Http://d3js.org/d3.v3.min.js"charset="Utf-8"></script> <script>D3.Select("Body"). SelectAll ("P"). Text ("www.ourd3js.com"); </script> </body>
In fact, all of the features in D3.js can be implemented in JavaScript, which is just a library of functions. What D3 does is to lighten your workload and make your code very easy to understand.
Next change the font color and size, slightly modify the above code:
//Select all the <p> in <body>, whose text content is www.ourd3js.com, the selection set is saved in the variable p varp = D3.Select("Body"). SelectAll ("P"). Text ("www.ourd3js.com"); //Modify the color and font size of a paragraphP.style ("Color","Red"). Style ("font-size","72px");
The code above is to make the code cleaner by assigning the selected element to the variable p and then changing the style with the variable p.
Here is a concept: the selection set. the object returned after selecting an element with D3.select () or D3.selectall () is the selection set.
In addition, some people will find that D3 can continuously call functions, such as: D3.select (). SelectAll (). text (); This is called chained syntax , and jquery's syntax is much like the usual jquery Friends will feel very kind.
iii. How to select elementsIn D3, there are two functions for selecting an element:
(1) D3.select (): Is the first one that selects all the specified elements
(2) D3.selectall (): Selects all of the specified elements
The results returned by these two functions are called selection sets . For example, the common usage of a selection set is as follows:
varBODY = D3.Select("Body");//Select the BODY element in the documentvarP1 = body.Select("P");//Select the first P element in bodyvarp = Body.selectall ("P");//Select all the P elements in the bodyvarSVG = body.Select("svg");//Select the SVG element in bodyvarRects = Svg.selectall ("rect");//Select all SVG elements in SVG
The selection set and the bound data are usually used together.
Iv. How to bind dataD3 has a unique feature: the ability to bind data to the DOM, that is, to bind to a document. This may not be easy to understand, for example: the page has paragraph elements <p> and an integer 5, so you can bind the integer 5 to <p> together. After binding, it is convenient when you need to rely on this data to manipulate elements.
The data is bound by the following two functions in D3:
(1) Datum (): Binds a data to a selection set
(2) data (): Binds an array to the selection set, and the values of the array are bound to each element of the selection set, respectively
Data () is relatively common.
Suppose you now have three paragraph elements as follows.
<p>Apple</p><p>Pear</p><p>Banana</p>
Next, use Datum () and data () to bind to the above three paragraph elements.
1, Datum ()Suppose you have a string, China, to bind this string to three paragraph elements, with the following code:
varstr =" China"; varBODY = D3.Select("Body");varp = Body.selectall ("P"); P.datum (str); P.text (function (d, i) {return "Section"+ i +"the data that the element binds to is a"+D;});
After binding the data, use this data to modify the contents of the three paragraph elements, with the following results:
012 elements The data that is bound is the China
In the above code, a nameless function (d, i)is used. This is often required when the selection set needs to use the data that is bound. It contains two parameters, where:
(1) d represents data, that is, data bound to an element.
(2) I represents the index, which represents the index number of the data, starting from 0.
For example, in the example above: the No. 0 element Apple binds the data is China.
2. Data ()There is an array that binds the elements of the array to three paragraph elements, respectively.
var dataset = ["I like dogs","I like cats"," I like snakes "];
Call data () and replace the string with three paragraph elements as a bound string with the following code:
var body = D3. Select ("body"); var p = body.selectall ("P"); P.data (DataSet) . Text (function (d, i) { return D; });This code also uses a nameless function (d, i), which corresponds to the following situation:
When i = = 0 o'clock, d is I like dogs.
When i = = 1 o'clock, d is I like cats.
When i = = 2 o'clock, d is I like snakes.
At this point, the three paragraph elements correspond to the three strings of the array dataset, and therefore, the function functions (d, I) return D directly. The result is that three paragraphs of text are converted into three strings of the array, respectively.
D3.js Series--
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
