Learn D3 getting started document: Shapes

Time:2021-9-21

Introduction

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.

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.

Learn D3 getting started document: Shapes
Learn D3 getting started document: Shapes
Learn D3 getting started document: Shapes

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.

Learn D3 getting started document: Shapes

howeverd3.lineMore convenient. calld3.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).

Learn D3 getting started document: Shapes

Through the line generator, the data returns the corresponding SVG path data string, which can be used to set the path elementdProperties.

Learn D3 getting started document: Shapes
Learn D3 getting started document: Shapes

(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) 。

Learn D3 getting started document: Shapes

If you want an area with a variable baseline, such asstacked area chartstreamgraphOr 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.

Learn D3 getting started document: Shapes

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.

Learn D3 getting started document: Shapes

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.

Learn D3 getting started document: Shapes

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 temperaturecurveProviding 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.

Another common shape D3 is calledArc(ARC), but mathematicians call itAnnular sector。 Its characteristics are applied inpie chartsdonut chartssunbursts(but the puzzling thing is, Noarc diagrams)。

Learn D3 getting started document: Shapes

With lines and areas byxandyThe configuration is similar, and the arc is composed ofinnerRadiusouterRadiusstartAngleendAngle(angle in radians) configuration. The arc generator above is configured to accept an array[startAngle,endAngle]

Learn D3 getting started document: Shapes
Learn D3 getting started document: Shapes

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.

Learn D3 getting started document: Shapes

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 π.

Learn D3 getting started document: Shapes

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.)

Learn D3 getting started document: Shapes
Learn D3 getting started document: Shapes

Now that we have introduced some common data graphs, let’s see how to make them move!

Next

appendix

Learn D3 getting started document: Shapes

attach

According to the source code, the platform dependency is removed and the main code is extracted. There are the following examples:

reference material