d3入门练习系列（三）绘制svg基本形状

基本形状

如果你对svg绘图比较熟悉，那么通过d3绘制svg格式的基本形状，如线段、折线、多边形、矩形等等，将非常简单。
如果你不熟悉svg绘图，也没关系。举个例子：如下代码表示一个圆心在(25, 75)半径为20的圆：

<circle cx="25" cy="75" r="20"/>

可以参考官方文档：基本形状。一分钟的功夫，你就大概了解。

废话不多，直接上代码。

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

基本上就是创建一个形状标签，然后通过attr方法将相应的属性及属性值加上去就OK。
基本形状对应的标有：

• 矩形 - rect
• 圆 - circle
• 椭圆 - ellipse
• 线条 - line
• 折线 - polyline
• 多边形 - polygon

path用法

path功能比较强大，可以绘制各种形状。
path元素的形状是通过属性 d 定义的。d的值是 ** 命令 + 参数** 的序列。
如

<path d="M 10 10">path>

表示将画笔移动到（10， 10）点。
M即 move to，是移动画笔，并没有真正的画出来。
M后面的两个数字是命令参数， 代表x, y坐标。

还有其它命令如：

• L x y, 在当前位置和xy位置上画一个线段
• H x, 水平方向绘制线段
• V y, 垂直方向绘制线段
• Z ,闭合路径

每个命令可以是大写或者小写，大写采用绝对定位，小写采用相对定位。
如

L 20 30

表示在画笔位置和(20, 30)点之间画一个直线。
而

l 20 30

表示从画笔位置开始，向x轴正方向（向右）移动20，向y轴正方向(向下)移动30，在这个位置和画笔位置之间画一个线段。
注意：svg的坐标系统，原点在左上角。

利用path绘制线条、矩形

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绘制圆形、椭圆、弧线是通过弧线命令 ** A ** 来进行，A命令非常强大但也很复杂，一般很少用到，后面有需要可以在专门学习。

今天绘制基本形状，都是简单的将svg格式内容通过d3简单的创建出来。了解svg的基本基础和d3操作svg基本用法。