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:
- D3 Data visualization library, used much like jQuery
- 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.
- 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