Recently, I am working on a project. Charts are a relatively important function, but I have never touched anything related to visualization before. Of course, it is impossible to build a wheel by myself. There are many excellent charting libraries in the community: Echarts, G6, HighCharts, ChartJS and D3 to name a few. First of all, our project was not focused on data presentation, so HighCharts and ChartJS were excluded first. Secondly, I have studied canvas too much and decided to use D3 because of our tight project.

The current situation of D3 is that both V3 and V4 are used by many people, and the examples on the official website are mainly v3, so choosing 3 or 4 is also a headache. In the end, I went with V4.

D3 and SVG

Scalable Vector Graphics (SVG) is an XML markup language used to describe two-dimensional Vector Graphics. Simply put, SVG is graphics-oriented and HTML is text-oriented.

In short, all we need to know is that the graphics drawn in SVG can be displayed directly on the page. More importantly, unlike Canvas, where rerender is required for every change, SVG is DOM-based and animation functions that can add event JS will also work on it, making it a bit friendlier to beginners.

D3 is based on SVG (V4 added canvas support), so D3 has a lot of SVG operations append, attr, etc., many of which are similar to SVG native methods.

So, since SVG can draw diagrams, what do you do with D3? D3 is, of course, intended to simplify the tedious work of creating diagrams in SVG, such as collision detection for force-directed diagrams.

A simple diagram

The effect is as follows:

The code is as follows (it can be run directly in jsbin, etc.):

var width = 300;  // Width of canvas
var height = 300;   // Height of canvas

var svg = d3.select("body")     // Select the body element in the document
    .append("svg")          // Add an SVG element
    .attr("width", width)       // Set the width
    .attr("height", height);    // Set the height
    
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  // Data (width of rectangle)

var rectHeight = 25;   // The pixel height of each rectangle (including whitespace)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x".20)
    .attr("y".function(d,i){
         return i * rectHeight;
    })
    .attr("width".function(d){
         return d;
    })
    .attr("height",rectHeight2 -)
    .attr("fill"."steelblue");
Copy the code

As a starting point, we don’t need to understand the meaning of every method, and we won’t be able to understand them all, because there are so many methods in D3. Such a simple chart, no matter SVG or Canvas, can be easily completed without any library, but it involves a series of strong interactions, such as dragging, force, zooming-in, rotation, editing, etc. I believe D3 is still the best choice.

The last few words

In fact, another important reason for choosing D3 is that it can better combine with React. Compared with Canvas diagram, no matter how fine-grained your code operation is, what you put in react component is nothing more than a Canvas element. SVG rendering as a DOM in JSX should be much more maneuverable. I hope I can make a summary if I have a chance later.