[D3.js] Overview

D3.js is a JavaScript library that operates on data files. It uses HTML, SVG, and CSS to make your data base more vibrant. D3 is focused on Web standards to provide you with the full functionality of a modern browser, without the need for a data-driven approach that uses your own specialized framework, combined with powerful visualization components and DOM manipulation.

Click to download the latest version (3.5.5):

• D3.zip

Or, on the page, refer to:

<src= "Http://d3js.org/d3.v3.min.js"  charset= "Utf-8"  ></script>

Sites using HTTPS should use D3, or a CDN that supports HTTPS, such as cdnjs Complete resources and use cases can also be downloaded on GitHub.

# Introduction

D3 allows you to bind arbitrary data to the Document Object Model (DOM) and then use data-driven transformations to the document. For example, you can use D3 to generate an HTML table for an array. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interactions.

D3 is not a single framework designed to provide every conceivable feature. Conversely, the key to the problem that D3 solves is the efficient operation of data-based documents. It provides significant flexibility to show all the functionality of web standards, such as HTML, SVG, and CSS. D3 is very fast, and it supports large datasets with minimal overhead and dynamic behavior of interactions and animations. D3 's functional style allows code to be reused through the collection of components and plugins .

# selections (selector?) ）

It is tedious to use the user's DOM API to modify the document: The method name is lengthy and the immediate execution method requires manual iteration and enlistment of the temporary state. For example, change the text color of a paragraph:

var paragraphs = document.getelementsbytagname ("P");  for (var i = 0; i < paragraphs.length; i++) {  var paragraph = Paragraphs.item (i); 
     paragraph.style.setproperty (null);}

The D3 uses a declared method to manipulate any node collection that is a selector. For example, the above loop can be rewritten as:

D3.selectall ("P"). Style ("Color", "white");

Of course, you can also manipulate the desired single node:

D3.select ("Body"). Style ("Background-color", "Black");

selectors are a concept defined in the selectors API and are natively supported by modern browsers. Sizzle(the CSS selector engine introduced afterjQueryversion 1.3) provides backward compatibility for older browsers. In the example above, the node is selected by the tag name ("P" and "Body", respectively). Elements can also be selected in various forms, including container, attribute value, class, and ID.
D3 provides many ways to manipulate nodes: Set properties or styles, register for event snooping, add, remove, or find nodes, and transform HTML or text content. This is enough to satisfy most of the needs. Direct access to the underlying DOM is also possible because the D3 selector is just a simple array of nodes.

# Dynamic Properties
readers familiar with jQuery or Prototype should immediately be aware of the similarities of D3. However, styles, attributes, and other attributes are recognized as methods of data in D3, not just simple constants. Although they appear to be simple on the surface, these methods are very powerful. For example D3.geo.path This method can project geographic coordinates into SVG's path data. D3 provides a number of built-in reusable methods and method factories, such as area charts, line charts, pie charts, and other graphic elements .
For example, to randomly add color to a paragraph:

function () {  return "HSL (" + math.random () * + ", 100%,50%)";});

Alternating odd-and-even nodes with a gray color:

function (d, i) {  return i% 2? "#fff": "#eee";});

Calculation properties tend to involve data binding. The data is contracted as an array, and the values are passed into the method as the first parameter (d). By default, by index, the first element in the array is passed to the first node in the selector, the second element is passed to the second node, and so on. For a chestnut, bind an array to a paragraph element and use that data to dynamically render the font size for the paragraph:

D3.selectall ("P")    . Data ([4, 8, [+], [+])    . Style (functionreturn D + "PX"; });

Once the data is bound to the document, you can eliminate the manipulation of the data, and the D3 will automatically retrieve the previously bound data. This way you don't need to rebind and then calculate the properties.

# Enter & Exit

Using D3 's Enter and exit, you can create new nodes for incoming data and remove nodes that are no longer needed.

When data is bound to a selector, each data element is paired with the corresponding node in the selector. If the node is less than the data, using enter to append the node, the extra data can be used as its parameter. For example:

D3.select ("Body"). SelectAll ("P").    data ([4, 8, p, p]).    Enter (). Append    . Text (functionreturn "I ' m number" + D + "!";});

The default result of a data operation is to update the node. Therefore, if you do not have enter and exit, only those elements that match the existing nodes are selected automatically. The data operator returns three parts (virtual selections): Enter, Updata, exit.

====================== P.S. Split Line Begin =========================

PS: A beautiful article about selections

Enter selections: Replace all missing elements with placeholders placeholder.

Update selections: Contains existing elements and binds to data

The remaining elements will eventually appear in the exit collection and be removed.

===================== P.S. Split Line End ===========================

// Update ... var p = d3.select ("Body"). SelectAll ("P").    data ([4, 8, (+), [+]])    . Text (String); // Enter ... P.enter (). Append ("P")    . Text (String); // Exit ... P.exit (). remove ();

By dealing with these three situations individually, you can clearly see which operations are running on which nodes. This improves performance and provides better control over some transitions. For example, a bar chart, you can initialize it with some old data, then transition to the new data during the update process, and finally remove the extra elements.

D3 enables you to transform documents based on data, including creating and deleting elements. It can change existing documents by responding to user interactions, animations over time, or asynchronous notifications from third parties. This hybrid approach is usually OK when the document is initially rendered well on the server and then updated by the client through D3.

# conversion (transformation) instead of representation (representation)

D3 is not a new graphical representation library. Unlike processing, Raphaël, or protovis, D3 's tagging vocabulary comes directly from the Web Standard: HTML, SVG, and CSS. For example, you can use D3 to create an SVG element and then render it with an external cascading style sheet. You can use a comprehensive filter effect, dashed strokes and clipping. Let's say that in the future browser vendors are introducing new features that you can use right away--no need to update the toolkit. Also, if you are going to use a toolkit other than D3, you have already formed the knowledge of these standards.

Best of all, D3 can be easily debugged with the browser's censorship elements: the nodes you use with D3 are actually nodes that the browser itself knows.

# transitions

The focus of D3 on the transformation naturally extends to the transition animation. A transition is a gradual interpolation of some styles and attributes over time. Gradient animations can control effects through the easing method, such as "elastic", "cubic-in-out", and "linear". D3 's interpolator supports both primitives, such as numbers and numbers in a string (font size, path data, and so on), as well as composite values. You can even expand the registry of the D3 Interpolator to support complex properties and data structures.

example, fade the page background to black:

D3.select ("Body"). Transition ()    . Style ("Background-color", "Black");

Or, there is a delay in resizing a circle:

D3.selectall ("Circle"). Transition ().    duration ().    Delay (function  Return I * ten;})    . attr (functionreturn math.sqrt (d * scale); });

In fact, D3 only modifies properties, reduces overhead, and can handle large, complex graphics with high frame speeds. D3 can also complete a series of complex transitions through event handling. Also, you can use the CSS3 transition; D3 will not replace the browser's toolbox, but it will make it easier to use.

====================== finally translated the split line ==========================

Original: Poke

To know the funeral, and listen to tell .

[D3.js] Overview