Learn D3 Getting Started Document: Shapes

Introduction

Following the Learn D3: Scales , it is only an English translation. The part of the code that can be modified is replaced with a static picture. If you want to interact in real time, please read the original text.

• Original: Learn D3: Shapes
• Version: Published Mar 24, 2020
• Origin
• My GitHub

text

SVG and Canvas allow any type of graphics to be intentionally universal; in contrast, D3 is used for visualization, so it provides a special shape vocabulary, which is a function of generating path data.

The path can draw circles, rectangles, straight lines, curves, dives, tigers, and anything you can imagine. The shape of the path is specified by the SVG path data language (or the equivalent Canvas path method ), which is similar to the commands of the drawing pen E.g:

• Mx,y-move to the specified point [x,y]
• Lx,y-draw a line to the specified point [x,y]
• hx-draw a horizontal line of length x
• vy-draw a vertical line of length y
• z-close the current subpath

For example, we want to imagine Apple's stock price over the past few years as a line chart. This is a date and close ("close" refers to the stock price at the close of the market), and the corresponding scale.

In order to draw this line, we need path data, start moving to the first point with Mx,y, and then repeat Lx,y to draw a line to each subsequent point. We can achieve this by looping through the points.

But d3.line more convenient. Calling d3.line will return a default line generator. By calling line .x and line .y, we can use the function to configure the line to return the x and y positions of the d These functions retrieve the required abstract value ( date or count ) and convert it to a visual position (by applying a scale).

Through the line generator, the data returns the corresponding SVG path data string, which can be used to set the d attribute of the path element.

(In order to avoid repetition, I have defined reusable axes in the appendix below. Each axis is a function for selecting G elements to fill.)

The path above uses blue lines without filling. In order to avoid misleading spikes caused by the miter between line segments, I set the miter limit to 100% (1×) of the line width. I can also use rounded corners to connect and seal.

For area maps, there is a similar d3.area. The shape of the area is specified as two lines x area .y0 is the baseline and area .y1 is the top line. For an area chart with a constant baseline along the bottom edge of the chart, we set area .y0 to y (0).

If you want an area with a variable baseline, such as stacked area chart , streamgraph or Bollinger bands , just pass a function area Like area .x and area .y1, this function will be called for each data point to calculate the corresponding y value.

In order to complete the display of Bollinger bands by displaying the central moving average and daily closing price, we can superimpose lines on the top. Because each path element can only have one style, we use multiple colors for multiple paths.

When lines and areas work together: you can call area .lineY0 or area .lineY1 to get the line corresponding to the area baseline or top line. This is useful for decorating areas with top or bottom lines.

Lines and regions have more functions, we won’t introduce them all here, but there are a few tips: Radial lines and regions are useful for periodic data, such as seasonal temperature ; curve provides configurable Interpolation methods, such as maintaining a single curve; you can show the gap of missing data .

Of course, visualization is more than just bars, lines, and regions.

Another common shape D3 is called arc (arc), but mathematicians call it circular sector . Its features are used in pie charts , donut charts , sunbursts (but confusingly, it is not arc diagrams ).

By the straight line and the area X and Y arranged similar to the arcuate innerRadius , outerRadius , startAngle , endAngle configuration (angle in radians). The arc generator above is configured to accept an array [startAngle，endAngle] .

For pie chart or donut chart, calculating the arc angle as described above may be cumbersome, so D3 provides d3.pie for convenience. Recall the delicious fruit data set.

Configure the value count attribute of the pie layout. 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π.

Each of these data objects can be passed to an arc generator with a fixed radius to generate a doughnut chart (because I can't help but want to show off, so I will use fill and fillet radius.)

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

Next

appendix

Attached

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

• example 1
• Example 2
• Example 3
• Example 4
• Example 5
• Example 6
• example 7

Reference

• Learn D3: Shapes