basic shape
If you are familiar with svg drawing, it will be very simple to draw basic shapes in svg format, such as line segments, polylines, polygons, rectangles, etc., through d3.
It's ok if you're not familiar with svg drawing. For example: the following code represents a circle with a center at (25, 75) and a radius of 20:
<circle cx="25" cy="75" r="20"/>
You can refer to the official document: basic shapes . In a minute of effort, you will probably understand.
Not much nonsense, just go straight to the code.
const height = 400, width = 600
const g= d3.select(".view")
.append("svg")
.attr('viewBox', [0, 0, width, height])
/**
* 清楚绘图区
*/
const clear = () => {
g.selectChild().remove()
}
const draw = {
/** 矩形 */
rect () {
clear()
g.append('rect')
.attr('x', '10')
.attr('y', '10')
.attr('width', '100')
.attr('height', '100')
},
/** 圆 */
circle () {
clear()
g.append('circle')
.attr('cx', '60')
.attr('cy', '60')
.attr('r', '50')
},
/** 椭圆 */
ellipse () {
clear()
g.append('ellipse')
.attr('cx', '60')
.attr('cy', '60')
.attr('rx', '30')
.attr('ry', '10')
},
/** 线段 */
line () {
clear()
g.append('line')
.attr('x1', '10')
.attr('y1', '10')
.attr('x2', '100')
.attr('y2', '100')
.attr('stroke', 'red')
.attr('stroke-width', '2')
},
/** 折线 */
polyline () {
clear()
const points = [
[0, 0],
[10, 10],
[50, 50],
[50, 100],
[00, 100],
]
const v = points.map((pt) => pt.join(',')).join(' ') // 逗号、空格分割都OK
g.append('polyline')
.attr('points',v)
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', '3')
},
/** 多边形 */
polygon () {
clear()
const points = [
[0, 0],
[10, 10],
[50, 50],
[50, 100],
[00, 100],
]
const v = points.map((pt) => pt.join(' ')).join(',')
g.append('polygon')
.attr('points',v)
}
}
Basically, it is to create a shape tag, and then add the corresponding attributes and attribute values through the attr method to OK.
The basic shapes are marked with:
- rectangle - rect
- circle - circle
- Ellipse - ellipse
- line - line
- Polyline - polyline
- polygon - polygon
path usage
The path function is relatively powerful and can draw various shapes.
The shape of the path element is defined by the attribute d . The value of d is a sequence of **command + parameter**.
like
<path d="M 10 10"></path>
Indicates to move the brush to (10, 10) point.
M stands for move to, which is to move the brush and not actually draw it. The two numbers after
M are command parameters, representing x, y coordinates.
There are other commands such as:
- L xy, draw a line segment between the current position and the xy position
- H x, draw a line segment horizontally
- V y, draw a line segment vertically
- Z , closed path
Each command can be uppercase or lowercase, uppercase uses absolute positioning, and lowercase uses relative positioning.
like
L 20 30
Indicates to draw a straight line between the pen position and the (20, 30) point.
and
l 20 30
It means that starting from the position of the brush, move 20 to the positive direction of the x-axis (to the right), move 30 to the positive direction of the y-axis (downward), and draw a line segment between this position and the position of the brush.
Note: In the coordinate system of svg, the origin is in the upper left corner.
Use path to draw lines and rectangles
const path = {
line () {
clear()
g.append('path')
.attr('d', 'M10 10 L 110 110') // 从（10，10)点开始，到（110， 110)点
.attr('stroke', 'red')
},
rect () {
clear()
g.append('path')
.attr('d', 'M10 10 l 110 0 v 50 h -110 v -50') // 从（10，10)点开始，向右移动110，再向下移动50，再向左移动110，再向上50
.attr('stroke', 'red')
.attr('fill', '#ccc')
}
}
path draws circles, ellipses, and arcs through the arc command ** A **. The A command is very powerful but also very complicated. It is rarely used in general. You can learn it later if you need it.
Drawing basic shapes today is simply creating svg format content through d3. Understand the basic foundation of svg and the basic usage of d3 operation svg.