The target

This article is a primer for getting started. It won’t even cover SVG, because D3 doesn’t help us to block SVG and Canvas knowledge, it just gives you better control over them, so for a quick understanding of d3 use, we will use DOM to render.

An overview,

Official definition: D3 (or d3.js) is a JavaScript visualization library based on web standards. D3 can use SVG, Canvas and HTML to visualize your data. D3 combines powerful visual interaction technology with data-driven DOM technology, allowing you to freely visualize data with the power of modern browsers. Personal understanding:

  1. D3 Data visualization library, used much like jQuery
  2. D3 API changes greatly after V4.0 v3.0 vs V4.0, most of the information on the market is mainly 3.0, causing no small obstacle for beginners to systematically learn D3.
  3. Compared with visual libraries that do the work through configuration, it is much more complex to use, requiring knowledge of SVG, Canvas and graphics; The relative advantage is that the implementation diagram will be more diverse.

data

Github API documentation for content structure reference

Second, the hello d3

<p></p
<p></p
Copy the code
let p = d3.select("body")
	.selectAll("p")
	
p.text("Hello World")
Copy the code

Online demo demo1_p2_hello_d3.html

Select elements and bind data

1. In fact, d3 selected elements are very similar to jQuery. D3 mainly through select, selectAll implementation of select elements, refer to the native JS querySelector querySelectorAll and the above “hello D3 “case can know their usage and difference. D3 supports concatenation, so you can change elements directly after you select them

d3.select('p').style('background'.'yellow')
d3.selectAll('p').style('background'.'yellow') // Do not need to traverse, directly to the whole operation
Copy the code

2. When we need to append a child element in the current DOM, append returns the child element instead of the current DOM

d3.select('p').append('span').text('I am in span') // Add text to span
Copy the code

3. Insert (newElement, targetElement) returns the inserted element

<p>p1</p>
<p id="target">target</p>
<p>p2</p>
Copy the code
d3.select('body').insert('p'.'#target').text('I am new here').style('color'.'pink')
Copy the code

The new P will be inserted in front of target

4. Remove Deletes elements

d3.select('body').select('#target').remove() // Select and remove
Copy the code

Attr is used to modify attributes of SVG nodes. This API is used to modify attributes of SVG nodes

d3.selectAll('p').text((d, i) = > {
    if (i===2){
        d3.select(this).attr('class'.'new') / / this is HTML
    }
    return d
})
Copy the code


3. Bind the selected DOM to data one by one

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
Copy the code
let dataset = ['javascript'.'css'.'html']
d3.select('#list').selectAll('li').data(dataset).text((d, i) = > i+ ':' + d)
Copy the code

However, the number of li and data is the same. What if they are different

Update, Enter, and exit

Example 1: update and enter: update and enter: arrays [3,6,9,12,15] are bound to three <p>. As you can imagine, the last two elements of the array have no elements to bind to, so D3 creates two empty elements relative to the last two elements of the array, and this part is called Enter. The part that has an element corresponding to the data is called Update

Example 2: Exit: If the array [3] is bound to three <p>, and you can imagine that the last two <p> have no data to bind, then the part without data binding is called exit


Online demo: demo3_p4_data_state. HTML

(This section is not original, see online, speak more clearly than the official website, but it is not original, I will not send the address)

5. Make a simple bar chart

Using DOM to render a horizontal bar chart is very simple

div.p {margin: 0; }#bar-wrapper{
    width: 500px;
    height: 500px;
    background: rgba(0,0,0,0.2);
    position: relative;
}
p {
    position: absolute;
    line-height: 50px;
    text-align: right;
    color: #fff;
}
Copy the code
<div id="bar-wrapper"></div>
Copy the code
const dataset = [300.280.450.90.150]
const padding = 30
const height = 50

d3.select('#bar-wrapper').selectAll('p').data(dataset).enter().append('p')
.style('left'.0) // This step can actually be placed in CSS, but for the sake of experiencing the idea of drawing a bar chart, use the analogy of the x property in rect
.style('top', (d, i) => {
	return (i+1)* (padding + height) + 'px'
}) / / analogy y
.style('width', (d, i) => {
	return d+ 'px'
}).style('height', height+ 'px')
.style('background'.'red')
.text(d= > d)
Copy the code

I use SVG to render diagrams in my daily development. Online demo: demo4_p5_draw_bar_by_dom. HTML

Six, to be continued

In fact, after learning these are not the common basic concepts of D3, as well as scale, axis, the use of SVG, the drawing method of common graphics, can be considered as a real entry, I have just learned D3, with rich knowledge will continue to update, if there is any mistake welcome comment pointed out. Attached is a demo that combines the above knowledge: demo5_p6_drawRectandaxis.html