1. What is D3

The full name of D3 is (Data-driven Documents), as the name implies, it is a data-driven document. Is a JavaScript function library, which is mainly used for data visualization. D3 has reduced the complexity of generating visualizations to a few simple functions that allow you to enter a few simple pieces of data and convert them into shapes.

Why d3.js

We know that there are many open source chart libraries Echarts, G2.js, and so on. So what are the advantages and disadvantages of D3 compared to these chart libraries?

  • D3 is based on SVG, so images can be enlarged without distortion.

  • D3 is relatively low-level and not very convenient for beginners, but once mastered, it is more handy than other tools. The figure below shows

  • Differences between D3 and other visualization tools:

For more information: juejin.cn/post/684490…

2. d3-selection 

Choose primitives

d3.select('.class2')

d3.selectAll('.class2')

d3.selectAll('#maingroup .class2')
Copy the code

Modify the primitives

Attr (name[, value]) (replacement) selection. Style (name[, value[, priority]]) selection. Classed (name[, value]) selection. Value]) (add/remove calss) // value exists: normal value, set attribute, return null, or false; // Value does not exist, return true/falseCopy the code

Figure yuan more

// If type is a string, create an element with that string as the tag name. Append (type) // If value is specified, the text content of the selected element is set to the specified value selection.text(). // If value is specified Setting the inner HTML of the selected element to the specified value replaces any existing child element select.html ().Copy the code

Delete the primitives

selection.remove()
Copy the code

Data binding

Selection.data (). // Bind the data of the specified array to the selected element and return a new selection set. // The new selection set is returned using update: the data has been successfully bound to the element. Selection.enter () // More data than pixels, add pixels selection.exit() // More pixels than pixels, delete pixels selection.join() // Automatically add/delete pixelsCopy the code

event

Selection. on(Typenames [, listener[, capture]]) // Add or remove (listener null) a Typenames event listener for each selected elementCopy the code

Give it a try and familiarize yourself with the API. You can try it with my code below.

Specific details of the API reference: www.d3js.org.cn/document/d3…

<! DOCTYPE html> <html> <head> <title>Data Visualization</title> <script src="https://d3js.org/d3.v7.min.js"></script> </head> <body> <svg width="1600" height="800" id="mainsvg" class="svgs"> <g id='maingroup' transform='translate(100, 100)'> <circle id='circle1' stroke='black' r='66' fill='#4B8E6F' cx='0'></circle> <rect id='rect1' class='class2' stroke='black' height='200' width='66' fill='#ff8603' x='100' y='-100'></rect> <rect id='rect2' class='class1' stroke='black' height='200' width='66' fill='#ffde1d' x='200' y='-100'></rect> <rect id='rect3' class='class1' stroke='black' height='200' width='66' fill='#7289AB' x='300' y='-100'></rect> <text id='myText' class='class2' stroke='yellow' font-size='2em' x='400' fill='#1e9d95'>Hey D3! </text> </g> <g id='secondgroup' transform='translate(550, 100)'> <rect id='rect4' class='class2' stroke='black' height='200' width='66' fill='#DD6B66' x='100' y='-100'></rect> <rect id='rect5' class='class1' stroke='black' height='200' width='66' fill='#759AA0' x='200' y='-100'></rect> <rect id='rect6' class='class1' stroke='black' height='200' width='66' fill='#E69D87' x='300' y='-100'></rect> </g> </svg> <script> // write your practice here... </script> </body> </html>Copy the code

3. Draw a bar chart

Data preparation

Let data = [{type: 'car ', value: 34}, {type:' home ', value: 85}, {type: 'accommodation ', value: 103}, {type: 'Transportation & Storage Post ', value: 142}, {type:' Construction & Real Estate ', value: 251}, {type: 'education ', value: 367}, {type: 'IT Communication electronics ', value: 491}, {type: 'social public management ', value: 672}, {type:' health ', value: 868}, {type: 'financial insurance ', value: 1234}];Copy the code

Create a canvas

Before drawing, you need to create a canvas for layout

< SVG width="1040" height="500" id=" mainSVG "class=" SVGS "> Const sum = d3.sum(data, d => d.value); data = data.map(d => { d.precent = d.value / sum; return d; })Copy the code

D3 – scale scale

  • Map abstract dimension data to a visual representation. The space used to map the actual data space to the screen
  • Scale is very important and often passes to coordinates and data
D3.scalelinear () d3.scaleband () // Segmented scale d3.scaleordinal (). // Both the output and input fields of ordinal scales are discrete. Band. Bandwidth () the width of each segment. Continuous. Domain ([domain]). // Real data continuous. Range ([range]) // To the data that comes outCopy the code

Create a scale

const xScale = d3.scaleLinear().domain([0, d3.max(data, d => +d.precent)]) .range([0, innerWidth]).nice(); //.nice() is used to display the full segment, Const yScale = d3.scaleBand().domain(data.map(d => d.type)).range([innerHeight, 0]);Copy the code

D3 – axis coordinate axis

D3. axisBottom(scale) // Build an axis generator with the scale to the leftCopy the code

Create coordinate axes

const xAxis = d3.axisBottom(xScale).tickSize(innerHeight).ticks(5, '.1%');
const yAxis = d3.axisLeft(yScale);
const g = svg.append('g').attr('id','maingroup')
.attr('transform', `translate(${margin.left},${margin.top})`);
g.append('g').attr('class', 'xAxis').call(xAxis);
g.append('g').attr('class', 'yAxis').call(yAxis);
Copy the code

drawing

const barGroup = g.append('g').attr('id', 'barGroup').selectAll('rect').data(data).join('rect') .attr('fill', '#007aff').attr('height', yscale.bandwidth () -10) D => yScale(d.type) + 5) // rectangle y position.transition().duration(1000) // animation.attr ('width', D => xScale(+ d.recent)) // Execute an animation that changes width from 0 to the calculated value.end();Copy the code
Const barText = g.apend ('g').attr('id', 'barText'); // Draw text const barText = g.apend ('g').attr('id', 'barText'); barText.selectAll('text').data(data).join('text') .attr('x', d => xScale(+d.precent)) .attr('y', D = > yScale (which ype)) attr (' dx ', '1 em'). The attr (' dy ', '1.6 em'). The attr (' the font, size, '12'). The attr (' color ', '# 475669'). Attr (' line - height, 1.5). The text (d = > ` ${d.v alue} people ${d3. The format (" 2% ") (d.p recent)} `);Copy the code
let toolTip; let toolTipGroup; Const barHover = g.apend ('g').attr('id', 'barHover'); barHover.selectAll('rect').data(data).join('rect') .attr('fill', '#ccd6ec') .attr('y', d => yScale(d.type)) .attr('width', innerWidth + margin.right) .attr('height', yScale.bandwidth()) .attr('opacity', '0') on (' mousemove ', function () {enclosing setAttribute (' opacity ', '0.3'); Attr ('y', event.y-margin-top). Attr ('y', event.y-margin-top). Attr ('opacity','0.8'); }) .on('mouseout', function(){ this.setAttribute('opacity','0'); toolTip.attr('opacity','0'); })Copy the code
ToolTipGroup = g.apend ('g').attr('id', 'toolTipGroup') toolTip = toolTipGroup.append('rect') .attr('class', 'toolTip') .attr('width','60') .attr('height','60') .attr('fill','black') .attr('opacity','0');Copy the code
D3. selectAll('.tick text'). Attr ('fill',' RGB (146, 146, 146 '). Attr (' the font, size, '12'). The attr (' dy ', '0.32 em) d3. SelectAll (' yAxis line'), remove (); d3.selectAll('.yAxis path').remove(); d3.selectAll('.xAxis path').remove(); d3.selectAll('.xAxis text').attr('transform', `translate(0, ${-innerHeight - 20})`); D3. SelectAll (' xAxis line '). The attr (the 'stroke', '# DDDDDD'). The attr (' stroke - opacity ', '0.8');Copy the code

Let the bar graph move

const barGroup = g.append('g').attr('id', 'barGroup').selectAll('rect').data(data).join('rect')
.attr('fill', '#007aff')
.attr('height', yScale.bandwidth() - 10)
.attr('y', d => yScale(d.type) + 5)
.transition().duration(1000)
.attr('width', d => xScale(+d.precent))
.end();
Copy the code