D3.js Study Record

Source: Internet
Author: User

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

D3.js is also a JavaScript framework, like jquery, except that his specialty is in the data visualization of this piece. So don't think the D3 is so complicated. In the above code we can see some of the uses of D3:

Select element:d3.select ("element"), this is the $ () in jquery, but not in shorthand form.

After creating and adding a new element to the selected element:. Append ("element"), which is the Append method in JavaScript, returns a set of elements that add the new element.

Sets or gets the specified property:. attr (name[, value]), with attr () in jquery.

D3.js uses chained methods like jquery, and can continue to invoke other methods after performing an operation, but we need to note that the output type of the previous method must match the input type of the next method!

Select multiple child elements in the selected element to make up a new selection set:selectall ("obj"), create an "empty house"--selection, so that we can fill the "furniture"-data. But now the selection set has not been inserted into the document because we also have to add data to these empty selection sets?

Sets or gets the binding data for a set of elements:. Data (DataSet), so that "empty house" allocated "furniture", D3 will be based on the data to carry out a reasonable distribution, the allocation of the furniture, the next step is not to move into these small houses?

Returns a new, data-bound element:. Enter (), this way our previously created house is ready for use. They have their place in the DOM, and we can finally move on to him!

Set HTML properties:. attr ()

Set CSS style:. Style ()

D3.js Study Record

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.