# 01起步

## D3js-数据可视化神器

最近准备把一些数据可视化一下，打算使用前端的`d3.js`库。这个库的全称也被称为**Data-Driven Document**，顾名思义，基于数据驱动文档，这一概念和Vue的设计思想很类似。`d3.js`下面统称为**D3**；一直以来是神一般的库的存在；尽管已经有许多优秀的库例如百度的`echaet`等；但是**D3**与其他的库相比在于，提供了无限定制的能力，让你的想象力尽情的发挥；在交互性上做的同样优秀。

\~\~感受一波

![d3js案例](https://picb.zhimg.com/v2-bf6c58a9284672cecc16c645e69f85c4_b.webp)

#### D3的需要的入门知识：

1. SVG
2. css
3. JavaScript

看完大佬们的博客，感觉**D3**的学习成本还是很高的，不过毕竟是神一样的包，肯定涉及到很多知识点，以后慢慢学习的过程查漏补缺吧。下面这张图就把一个学习的过程总结的很好，我觉得太生动了；还是站在巨人的肩膀上，躺着比较舒服，我也喜欢躺。

1. ![学习过程](https://pic4.zhimg.com/80/v2-200a3d892a637679fdc5239e93f27bbc_720w.jpg)

## scale vector graphics (SVG)学习

可缩放的矢量图，svg标签内的限制条件

> * 图片必须在`svg`标签内
> * svg指定高度和宽度，也可以使用百分比；继承父元素宽度
> * svg中可以绘制多个图片

svg中可使用预先设置好的一系列标签；

* 矩形 `rect`
* 圆形`circle`
* 椭圆 `ellipse`
* 线 `line`
* 折线 `polyline`
* 多边形 `polygon`
* 路径 `path`

### 快速生成一个圆

* 使用`circle`标签表示生成圆形
* `cx|cy`圆心的位置，不指定则为0,0
* `stroke`外圆边框颜色及厚度

```javascript
    <svg width="400" height="400">
      <circle cx="200" cy="200" r="100" stroke="black" stroke-width="2" fill="red" />
    </svg>
```

### 快速生成一个矩形

* width 矩形长
* height 矩形宽
* stroke 矩形边框
* stroke-width 矩形边框宽度
* style 指定矩形样式

```javascript
    <svg width="400" height="400">
      <rect width="100" height="100" stroke="black" stroke-width="2" style="fill: red" />
    </svg>
```

### 快速生成一个椭圆

* rx 定义水平半径
* ry 定义垂直半径

```javascript
    <svg width="400" height="400">
      <ellipse
        cx="150"
        cy="100"
        rx="100"
        ry="50"
        stroke="black"
        stroke-width="2"
        style="fill: red"
      />
    </svg>
```

### 快速生成一个线条

* x1 和x2 x轴的开始和结束
* y1和y2  y轴的开始和结束

```javascript
    <svg width="400" height="400">
      <line 
        x1="150"
        y1="100"
        x2="100"
        y2="50"
        stroke="black" 
        stroke-width="2" />
    </svg>
```

### 快速生成一个多边形

定义了6个角的位置，将会生成一个三角形

* points 定义了每个角的坐标轴位置

```javascript
    <svg width="400" height="400">
      <polygon
        points="220,100 300,210 170,250"
        style="fill:#cccccc;
stroke:#000000;stroke-width:1"
      />
    </svg>
```

#### 快速生成一个折线图

* points同样定义了每个折点的坐标
* fill 这个填充区域还有点迷惑

```javascript
    <svg width="400" height="400">
      <polyline
        points="0,0 0,20 20,20 20,40 40,40 40,60"
        style="fill:white;stroke:red;stroke-width:2"
      />
    </svg>
```

### 快速生成一个路径图

从250，150出发，到150,350；再到350,350；最后回到原点，生成了一个三角形。

> 推荐使用SVG编辑器来编辑路径图

```javascript
      <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M250 150 L150 350 L350 350 Z" />
      </svg>
```

### 参考

1. [SVG](https://www.w3school.com.cn/svg/index.asp)
2. [d3js](https://juejin.im/post/5d1e074af265da1bca51f8ec)
3. [D3学习之路-知乎](https://zhuanlan.zhihu.com/p/38001672)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/svg/01-qi-bu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.