D3 is probably the most well-known tool in the field of front-end visualization, and this article will take a brief look at d3.

What is the d3

According to the official documentation, D3 is a set of data visualization tools to help us build data-driven DOM models. (including charts, of course), but unlike DataV, Echarts and the like, D3 doesn’t come out of the box. Using D3 requires a good understanding of HTML, SVG, and Canvas technologies, and gives us more flexibility in development.

The bar chart here shows how D3 is visualized.

D3 includes those components

Selection

If you’ve worked with D3 before, you’re probably familiar with the d3 Selection chain call. Like jquery, D3 encapsulates most OF the DOM methods, and calling them returns a Selection object on which you can then add, delete, change, or bind events to the DOM.

This is an example from the official website

d3.selectAll("p").style("color"."blue");
Copy the code

Data mapping

Modern front-end frameworks are data-driven, and D3 has a similar concept. Such as:

// Step 1. Bind data and selection
var p = d3.select("body").selectAll("p").data([4.8.15.16.23.42]);

// Step 2. Enter...
p.enter().append("p").text(function(d) {
  return d;
});
// Step 3. Exit...
p.exit().remove();
Copy the code

In Step 1, we map Selection to the corresponding data, and one of the nodes in Selection corresponds to the data in the array. Note that no actual DOM nodes are generated. In Steps 2 and 3, we declared the selection operations for adding and deleting data respectively. D3 calls these operations when the data changes. Through data mapping, D3 connects data to Selection, freeing us from complex DOM states and ensuring that the dom generated is predictable. Enter and exit allow us to observe changes in data in finer granularity and make corresponding processing. (such as node deletion animation)

Layout

A Layout b Layout C Layout D Layout Layout in D3, however, emphasizes algorithms rather than rendering, unlike dataV or Echarts, which pass in data and configuration and render diagrams directly. Take Tree as an example:

The d3 tree will take the data from the tree structure, convert it to layout, add coordinates, and bind the data to selection to render the tree structure. As you can see, Layout is only responsible for coordinate conversion and calculation. As for rendering, D3 will not help you package it. You need to take the initiative to use SVG, Canvas or even HTML for rendering.

Here is an example of rendering a tree using D3.

Used in React

React and D3 are both data-driven, so combining the two is actually quite handy. We just need to store the data in React, connect the data to D3, and use D3 to draw the page. For example, d3 does not execute enter or exit when state changes. Requires us to manually declare the componentDidUpdate cycle in active rendering operations. In contrast to Vue and React responsiveness, D3 does not listen for data changes and therefore does not perform the corresponding Enter or exit operation.

Component packaging

Componentization is also important, especially before the whole project becomes complicated. Methods for encapsulating components are also provided in D3. This is the selection. Call method, for example:

// Declare a function that takes Selection as an argument
function makeStyle(selection) {
  selection.style("width".300).style("height".300);
}
Call it on div selection
d3.select("div").call(makeStyle);
Copy the code

With selection.call we can encapsulate components and call them where we need them.

But when react and D3 are used together, do you use the React or D3 component? For the most part, this is a case study.

1. The React component works better when your interface is mostly rendered with little interaction. Consider a bar chart: just take the data and configuration and render the page directly. Make the react function a component that accepts data and config, and use D3 to render it internally.

2. There are also cases where the interaction is complex and the parent component is also rendered in D3, it is better to use D3. Like an editor

conclusion

Unlike AntV and ECharts, D3 does not introduce a new graphical description syntax. Using D3 requires you to know the underlying SVG and Canvas. This increases both difficulty and flexibility. If you have a high degree of customization for diagrams or want to learn about SVG, Canvas, etc., you can use D3. If it’s just a normal chart, use Echarts.

I am writing a series of data Visualization tutorials and experiences, which you can read in the following ways.

  • Github
  • The Denver nuggets
  • Some visual demos