FollowLearn D3: ScalesThe fifth part is only an English translation. The modifiable code is replaced by static pictures. If you want real-time interaction, please read the original text.
Svg and canvas allow any type of graphics to be intentionally generic; In contrast, D3 is used for visualization and therefore provides specializedshapeVocabulary, these shapes are functions that generate path data.
Paths can draw circles, rectangles, lines, curves, dives, tigers, and anything you can imagine. The shape of the path is determined bySvg path data language(or equivalent)Canvas path method）Specify, which is similar to the old styleDrawing penCommand. For example:
- MX, Y – move to specified point [x, y]
- LX, Y – draw a line to the specified point [x, y]
- HX – draw a horizontal line with a length of X
- Vy – draw a vertical line with a length of Y
- Z – close current subpath
For example, we want to imagine Apple’s share price over the past few years as a broken line chart. This is adateandcloseData set (“close” refers to the stock price at the closing of the market), and the corresponding scale.
To draw this line, we need path data, start moving to the first point with MX and y, and then repeat LX and y to draw a line to each subsequent point. We can do this by looping through the points.
howeverd3.lineMore convenient. call
d3.lineA default line generator is returned by callingline. X andline. y, we can use the function to configure the line to return a given data pointdThe X and Y positions of. These functions retrieve the required abstract values（dateorcount）And convert it to a visual location (by applying scale).
Through the line generator, the data returns the corresponding SVG path data string, which can be used to set the path elementdProperties.
(to avoid repetition, I define reusable axes in the appendix below. Each axis is a function that selects the G element for filling.)
The path above is blue and not filled. To avoid misleading spikes caused by mitering between line segments, I willMiterThe limit is set to 100% (1) of the line width ×）。 I can also use fillet lines to connect and seal.
For the area map, there is a similar D3. Area. The shape of the area is specified as having sharedxTwo lines of value:area. Y0 is the baseline,area. Y1 is the top line. For an area chart with a constant baseline along the bottom edge of the chart, we willarea. Y0 set toy(0) 。
If you want an area with a variable baseline, such asstacked area chart，streamgraphOr belowBollinger bands, herearea. Y0 just pass a function. Andarea. X andareaAs with. Y1, this function is called for each data point to calculate the correspondingyValue.
In order to complete the display of Bollinger Bands by displaying the central moving average and daily closing price, we can superimpose lines at the top. Because each path element can only have one style, we use multiple colors for multiple paths.
When lines and areas work together: they can be called separatelyarea. liney0 orarea. liney1 to obtain the line corresponding to the area baseline or top line. This is useful for decorating areas with top or bottom lines.
Lines and areas have more functions. We won’t introduce them all here, but there are several tips:Radial lines and areasUseful for periodic data, such asSeasonal temperature；curveProviding configurable interpolation methods, such as maintaining a single curve; You canShow gaps for missing data。
Of course, visualization is more than just bars, lines, and areas.
With lines and areas byxandyThe configuration is similar, and the arc is composed ofinnerRadius， outerRadius， startAngle， endAngle(angle in radians) configuration. The arc generator above is configured to accept an array
For pie chart or donut chart, the calculation of arc angle as described above may be cumbersome, so D3 provides for convenienced3.pie。 Think back to the delicious fruit dataset.
Layout for piecountProperty configurationvalueUsing the accessor, we can calculate the arc angle so that the angle span of each arc is proportional to its value, and the total span of the arc increases continuously from 0 to 2 π.
These objects of each data can be passed to the arc generator with fixed radius to generate a doughnut (because I can’t help showing off, I will use fill and fillet radius.)
Now that we have introduced some common data graphs, let’s see how to make them move!
According to the source code, the platform dependency is removed and the main code is extracted. There are the following examples: