Home > Developer > Web Develop
Since the D3 class library and array are closely related, it is necessary to discuss the data binding in D3 and how to operate inside the array.
Arrays in the 1.D3Like other programming languages, D3 array elements can be types such as numbers or characters, such as:
SOMEDATA=[20,36,48,59,600,88];
In addition, considering the convenience of JSON data in network transport, the D3 array also supports JSON objects such as:
Somebook=[{name: "Book1", price:50}, {name: "Book2", price:150}, {name: "Book3", price:350}];The array has a filter () method whose return value is an array of data that satisfies the custom requirements in the array. For example:
Somenumer.filter (function (SN) {return SN >= 40});This statement uses the filter method of the Somenumber array, which uses a function that iterates through each element in the Somenumber (named SN), if a custom condition (greater than or equal to 40) is met. This element is copied to a new array, and the last return value is the array.
3. Bindings, enter () and exit ()D3 uses the data () method to bind the array and the selected CSS elements;
The Enter () method defines when the array element exceeds the number of CSS elements already bound or selected, generates a new CSS element, and binds the data in the array with the new CSS element;
The exit () method defines the extra array elements that are discarded when the array element exceeds the number of CSS elements that are already bound or selected.
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Test</title> <Scripttype= "Text/javascript"src= "D3.js"></Script> </Head><style>#borderdiv{width:200px;Height:50px;Border:1px solid Gray;}</style> <Body> <DivID= "Borderdiv"> </Div> </Body> <Script>varsomenumbers= [ -, the, 9 , -, +];varsmallernumers=Somenumbers.filter (function(E1) {returnE1<= + ? This : NULL}); D3.select ("Body"). SelectAll ("Div"). Data (Smallernumers). Enter (). Append ("Div"). HTML (function(SD) {returnSD}) . Style ("Font-weight", " the");</Script></HTML>
In the above code, Smallernumber will contain the 17,9,40 three elements, but only the broderdiv div, so when the above script is executed, 9 and 40 will be reborn into two div.
Of course, if you replace the Enter () method in the above code with exit (), then 9 and 40 will be discarded, and no new div will be generated.
Reference: D3.js in action
Use of array in D3.js
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
