D3.js Series---first knowledge

D3.js (Data-driven documents) is a data-driven document that is a JavaScript library for manipulating documents based on data. Compared to Echart, ANTV and other chart libraries, it is a relatively low-level data visualization tool. It does not provide any kind of out-of-the-box charts, only the most basic things, all the charts need to be in its library to choose the appropriate method to build. In all that data today, we need to make the data live and show the beauty of the data.

Brief introduction

Still hold the pipa half cover face, awaited finally to contact data visualization. Data visualization is becoming more and more popular, making complex data and text very easy to understand. As one of the best, of course, we must first Kan D3.

D3.js is a library of JavaScript functions based on how data-driven documents work, primarily for Web page graphing, interactive graphics generation, and one of the most popular visualization libraries, which are used by many other tabular plugins. D3 gives you the ability to visualize data vividly with html,svg and CSS. In a word, D3 combines powerful visualizations, dynamic interactions, and data-driven dom manipulation methods to create dazzling visualizations based on existing Web standards.

Compare D3 and jquery

The same is the operation of the DOM, it is not to be taken out to compare:

• D3 is data-driven, jquery is not: we use jquery selector $ () to manipulate elements directly; D3 provides data and callbacks through proprietary datum (), Data (), enter () and exit () methods, and then manipulates elements
• D3 is used to visualize data, and jquery is used to create Web applications

Use

Download the latest version here (5.5.0):

• D3

Direct link to latest version:

<script src="https://d3js.org/d3.v5.min.js"></script>

Npm:

npm install d3

Yarn:

yarn add d3

Browser support Scenarios

Mainstream browsers supported by D3 do not include IE8 and previous versions. D3 is available on Chrome, Firefox, Safari, opera and IE9. Most of the components of D3 can be run in the old browser.

Simple example (Implementation of a simple chart)

Column chart concise, eye-catching, is a simple common chart, the main components are rectangular, axis and text description. This example draws only the rectangular part.

Suppose given us a set of data, [30, 86, 168, 281, 303, 365], according to the picture we can intuitively see the relationship between these data

Let's take a step-by-step implementation of it.

Selection Set

In jquery we use selectors $ () to select elements, and in D3 we introduce a new noun called the selection set . The object returned after selecting an element with D3.select () or D3.selectall () is the selection set.

• D3.select ()-Select an element from the current document
• D3.selectall ()-Select multiple elements from the current document
• Selection.style ()-Gets or sets the Style property

In D3 we can use chained syntax like jquery

d3.select()  .selectAll()  .style(‘color‘, ‘red‘);

Data binding

In D3 we can bind data to the DOM, which can be implemented by functions:

• Selection.datum ()-Gets or sets the data for a single element
• Selection.data ()-Gets or sets the data for a set of elements

Here is a description of the use:

var dataset = [‘Beijing‘, ‘Shanghai‘, ‘Tianjin‘, ‘Chongqing‘];var p = body.selectAll(‘p‘);p.data(dataset).text(function(d, i) {  return d;});

This binds the data to the P tag, the function functions (d, i) {} contain two parameters, D represents the data, and here is the data bound to the element; I represents the index, starting from 0

Canvas

To draw, the first thing you need is a "canvas". Two powerful "canvases" are available in HTML5: SVG and canvas. There's not much to explain here.

D3 provides a number of SVG graphics generators, which we implement in the SVG canvas.

Add a canvas as follows:

let svg = d3.select(‘body‘)  //选择文档中的body元素  .append(‘svg‘);     //添加一个svg元素  

Draw a rectangle

Before we draw the rectangle, there is no rect element in our SVG element, we need to add a complement to it ourselves, and we need to use Selection.enter () and Selection.append () as a chain.

svg.selectAll("rect")  .data(data)  // 绑定数据  .enter()      // 为缺失的元素返回占位符  .append("rect")    // 添加足够数量的矩形元素  .attr("x",20 + ‘px‘)     //设置矩形的x轴和y轴位置  .attr("y",function(d,i){    return i * 28 + ‘px‘;  })  .style("width",function(d){  // 设置矩形的宽高    return d + ‘px‘;  })  .style("height",26 + ‘px‘)  .text(function(d) {    return d;  })  

A simple column chart is successful and the results are as

• SVG reference Documentation
• Canvas reference Documentation

D3.js Series---first knowledge