使用 SVG 和 Vue.Js 构建动态树图

本文翻译自“Building a Dynamic Tree Diagram with SVG and Vue.js”，点击文章底部「阅读原文」即可查看

本文将会带你了解到我是如何创建一个动态树图的，该图使用 SVG（可缩放矢量图形）绘制三次贝塞尔曲线（Cubic Bezier）路径并通过 Vue.js 以实现数据响应。
在开始前，先让我们来看一个 demo(http://svg-tree-diagram.surge.sh/)。

基于 SVG 和 Vue.js 框架的强大功能，我们可以轻松创建基于数据驱动、可交互和可配置的图表与信息图。
该图是一个三次贝塞尔曲线的集合，它基于用户提供的数据，从单点出发，并在不同的点结束，且点和点之间的距离相同。因此，该图会响应用户输入的内容。
我们将首先学习如何制作三次贝塞尔曲线，然后通过剪切蒙版在坐标系中尝试找到

[/code] 元素可用的 [code]x

复制代码

和

y

复制代码

点。
我在这个案例中使用了很多视觉动画以保证趣味性。本文的主要思想是帮助你为类似的项目设计出自己的图表。
[h1]SVG[/h1][h3]Cubic Bezier 曲线是如何形成的？[/h3]你在上面的 demo 中看到的曲线被称为三次贝塞尔曲线。我已在下面高亮显示了此曲线结构的每个部分。

它总共有 4 对坐标。第一对坐标 ——

(x0,y0)

复制代码

—— 是起始锚点，最后一对坐标 ——

(x3,y3)

复制代码

—— 是结束锚点，指示完成路径的位置。
中间的两对坐标是：

贝塞尔控制点 #1
1. (x1,y1)
复制代码
和
贝塞尔控制点 #2
1. (x2,y2)
复制代码

基于这些点实现的路径是一条平滑曲线。如果没有这些控制点，这条路径就是一条笔直的线！
让我们把这四个坐标放入 SVG 语法的

[/code] 元素中。
[list=1][*][code]// 三次贝塞尔曲线的路径语法

复制代码

[/code]
[/list]语法中的字母 [code]c

复制代码

代表三次贝塞尔曲线。小

c

复制代码

表示相对值，而大写

C

复制代码

表示绝对值。我用绝对值

C

复制代码

来创建这个图。
实现对称性
对称性是实现该图的关键点。为了实现这一点，我只使用一个变量来派生出类似于高度，宽度和中点等值。
就让我们把这个变量命名为

size

复制代码

吧。由于此树形图的方向是水平的，因此可以将变量

size

复制代码

视为整张图的水平空间。
让我们为这个变量赋予实际值。这样，你还可以计算路径的坐标。

1. size = 1000
复制代码

[h1]寻找坐标[/h1]在我们寻找坐标前，我们需要新建一个坐标系！
[h3]坐标系和 viewBox[/h3]

[/code] 元素的 [code]viewBox

复制代码

属性非常重要，因为它定义了 SVG 的用户坐标系。简而言之，

viewBox

复制代码

定义了用户空间的位置和维度以便于绘制 SVG。

viewBox

复制代码

由四个数字组成，顺序需要保持一致 ——

min-x,min-y,width,height

复制代码

。

1. ...
复制代码

我们之前定义的

size

复制代码

变量将控制此坐标系的

width

复制代码

和

height

复制代码

。
稍后在 Vue.js 部分，

viewBox

复制代码

将绑定到计算属性以填充

width

复制代码

和

height

复制代码

，而

min-x

复制代码

和

min-y

复制代码

在此实例中始终为零。
请注意，我们没有使用 SVG 元素本身的

width

复制代码

和

height

复制代码

属性。因为，我们稍后会通过 CSS 设置

[/code] 的 [code]width:100%

复制代码

和

height:100%

复制代码

，以便自适应填满整个 viewport。
现在整张图的用户空间 / 坐标系已准备好，让我们看看

size

复制代码

变量如何通过使用不同的

%

复制代码

值来帮助计算坐标。
[h3]恒定和动态坐标[/h3]

圆是图的一部分。这就是为什么从一开始就把它包含在计算中是很重要的。如上图所示，让我们开始导出一个圆和一个样本路径的坐标值。
垂直高度分为两部分：

topHeight

复制代码

（

size

复制代码

的 20%）和

bottomHeight

复制代码

（

size

复制代码

剩余的 80%）。水平宽度分为两部分 —— 分别是

size

复制代码

的 50%。
这样圆坐标（

halfSize,topHeight

复制代码

）就显而易见了。圆的

radius

复制代码

属性设置为

topHeight

复制代码

的一半，这样的可用空间非常合适。
现在，让我们看一下路径坐标……

1. x0,y0
复制代码
—— 第一对锚点始终保持不变。这里，
1. x0
复制代码
是图表
1. size
复制代码
的中心，
1. y0
复制代码
是圆圈停止的垂直点（因此增加了一个 radius）并且是路径的起点。
=
1. （50%的size,20%的size+radius）
复制代码
1. x1,y1
复制代码
—— 贝塞尔控制点 1，对于所有路径也保持不变。考虑到对称性，
1. x1
复制代码
和
1. y1
复制代码
总是图表
1. size
复制代码
的一半。=
1. (50%的size,50%的size)
复制代码
1. x2,y2
复制代码
—— 贝塞尔控制点 2，其中
1. x2
复制代码
指示哪一侧形成曲线并且为每条路径动态计算。同样，
1. y2
复制代码
是图表
1. size
复制代码
的一半。
=
1. (x2,50%的size)
复制代码
1. x3,y3
复制代码
—— 最后一对锚点，指示路径绘制结束的位置。这里，
1. x3
复制代码
模仿
1. x2
复制代码
的值，这是动态计算的。
1. y3
复制代码
占据了
1. size
复制代码
的 80%。
=
1. (x3,80%的size)
复制代码

在合并上述计算结果后，请参阅下面的通用路径语法。为了表示

%

复制代码

，我只是简单的将

%

复制代码

值除以 100。

1. [/code]
2. [/list]注意：整个代码逻辑中 [code]%
复制代码
的选择最初看起来似乎全是主观推断，但它是为了实现对称而选择的正确比例。一旦你了解了构建此图表的目的，你就可以尝试自己的
1. %
复制代码
值并检查不同的结果。
下一部分重点是找到剩余坐标
1. x2
复制代码
和
1. x3
复制代码
的值 —— 这使得能够根据它们的数组索引动态地形成多个弯曲路径。
根据数组中的多个元素，可用的水平空间应分配到相等的部分，以便每个路径在
1. x-axis
复制代码
上获得相同的空间量。
公式最终应适用于任意数量的项目，但出于本文的目的，我已经使用了 5 个数组项 ——
1. [0,1,2,3,4]
复制代码
。意思是，我将绘制 5 条贝塞尔曲线。
[h3]寻找动态坐标（x2 和 x3）[/h3]首先，我将
1. size
复制代码
除以元素数，即数组长度，并命名为
1. distance
复制代码
—— 作为两个元素之间的距离。
- 1. distance = size/arrayLength
  复制代码
- 1. // distance = 1000/5 = 200
  复制代码
然后，我循环遍历数组中的每个元素，并将其
1. index
复制代码
值乘以
1. distance
复制代码
。为了描述简单，我用
1. x
复制代码
表示
1. x2
复制代码
和
1. x3
复制代码
。
- 1. // value of x2 and x3
  复制代码
- 1. x = index * distance
  复制代码
当我使用
1. x
复制代码
的值来表示
1. x2
复制代码
和
1. x3
复制代码
时，这张图看起来有点奇怪。

如你所见，坐标的位置是正确的，但不是很对称。左侧的元素看起来比右侧的元素多。
此时因为一些原因，我需要将
1. x3
复制代码
坐标放在
1. distance
复制代码
的中心，而不是在一开始的地方。
为了解决这个问题，让我们重新审视下变量
1. distance
复制代码
—— 对于给定的场景，它的值是 200。我只是给
1. x
复制代码
又加了 distance 的一半。
- 1. x = index * distance + (distance * 0.5)
  复制代码
上式意思是，我找到了
1. distance
复制代码
的中点并将最终的
1. x3
复制代码
坐标放在那里，并调整了贝塞尔曲线 #2 的
1. x2
复制代码
。

在
1. x2
复制代码
和
1. x3
复制代码
坐标中添加 distance 的一半，适用于数组的奇数项和偶数项元素。
[h3]图层蒙版[/h3]为了使蒙版形状为圆形，我已经在 mask 元素中定义了一个 circle。
- 1. [/code]
  2. [*][code]
  复制代码
- 复制代码
- 复制代码
- 1. [/code]
  2. [/list]接下来，使用 [code]
  复制代码
  元素中的
  1. [/code] 标签作为内容，我使用 [code]mask
  复制代码
  属性将图像绑定到
  1. [/code] 元素里（已在上述代码中创建）。
  2. [list=1][*][code]
  复制代码
- 1. [/code]
  2. [/list]由于我们试图将方形图像拟合成圆形，我通过减小圆的 [code]radius
  复制代码
  来调整图像位置，以通过圆形蒙版实现图像的完全可见性。
  让我们将所有的值都放入图表中，以帮助我们看到完整的图像。
  
  [h1]使用 Vue.js 的动态 SVG[/h1]到目前为止，我们已经了解了贝塞尔曲线的本质，以及它的工作原理。因此，我们有了静态 SVG 图的概念。使用 Vue.js 和 SVG，我们现在将用数据驱动图表，并将其从静态转换为动态。
  在本节中，我们将把 SVG 图分解为 Vue 组件，并将 SVG 属性绑定到计算属性，并使其响应数据更改。
  最后，我们还将查看配置面板组件，该组件用于向动态 SVG 图提供数据。
  我们将在本节中了解以下关键主题。
  - 绑定 SVG viewBox
  - 计算 SVG 路径坐标
  - 实现贝塞尔曲线路径的两个选项
  - 配置面板
  - 家庭作业
  绑定 SVG viewBox
  首先，我们需要一个坐标系统才能在 SVG 内部绘制。计算属性
  1. viewbox
  复制代码
  将使用
  1. size
  复制代码
  变量。它包含由空格分隔的四个值 —— 它被送入
  1. [/code] 元素的 [code]viewBox
  复制代码
  属性。
  - viewbox()
    复制代码
  - {
    复制代码
  - return "0 0 " + this.size + " " + this.size;
    复制代码
  - }
    复制代码
  在 SVG 中，
  1. viewBox
  复制代码
  属性已经使用驼峰命名法（camelCase）。
  - [/code]
    [*][code]
    复制代码
  因此为了正确绑定上计算属性，我在
  1. .camel
  复制代码
  修饰符后对该变量使用了短横线命名（kebab-case）的方式（如下所示）。通过这种方式，HTML 才得以正确绑定此属性。
  现在，每次我们更改
  1. size
  复制代码
  时，图表都会自行调整，而无需手动更改标记。
  计算 SVG 路径坐标
  由于大多数值都是从单个变量
  1. size
  复制代码
  派生的，所以我已经为所有常量坐标使用了计算属性。不要被这里的常量混淆。这些值是从
  1. size
  复制代码
  中派生出来的，但在此之后，无论创建多少曲线路径，它们都保持不变。
  如果你改变 SVG 的大小，这些值会再次被计算出来。考虑到这一点，这里列出了绘制贝塞尔曲线所需的五个值。
  - topHeight —
    size*0.2
    复制代码
  - bottomHeight —
    size*0.8
    复制代码
  - width —
    size
    复制代码
  - halfSize —
    size*0.5
    复制代码
  - distance —
    size/arrayLength
    复制代码
  此时，我们只剩下两个未知值，即
  1. x2
  复制代码
  和
  1. x3
  复制代码
  ，我们有一个公式可以确定它们的值。
  - x = index * distance + (distance * 0.5)
    复制代码
  为了找到上面的
  1. x
  复制代码
  ，我们需要一次将
  1. index
  复制代码
  输入到每个路径的公式中。所以……
  在这使用计算属性合适吗？肯定不合适。
  我们不能将参数传递给计算属性 —— 因为它是一个属性，而不是函数。另外，需要一个参数来计算意味着——使用计算属性对缓存也没什么好处。
  注意：上面有一个例外，Vuex。如果我们正在使用 Vuex Getters，那么，我们可以通过返回一个函数将参数传递给 getter。
  在本文所述的情况下，我们不使用 Vuex。可即便如此，我们仍有两个选择。
  [h3]选择一[/h3]我们可以定义一个函数，在这里我们将数组
  1. index
  复制代码
  作为参数传递并返回结果。如果要在模板中的多个位置使用此值，选择
  1. Bitcleaner
  复制代码
  。
  - [/code]
    [*][code]
    复制代码
  - [/code]
    [/list]calculateXPos() 方法将在每次调用时进行评估。并且此方法接受索引 —— [code]i
    复制代码
    —— 作为参数（代码如下）。
    - [/code]
      [*][code] methods: {
      复制代码
    - calculateXPos (i)
      复制代码
    - {
      复制代码
    - return distance * i + (distance * 0.5)
      复制代码
    - }
      复制代码
    - }
      复制代码
    - [/code]
      [/list]下面是运行在 CodePen 上 Option 1 的结果。
      Option 1 - Bezier Curve Tree Diagram with Vue Js
      https://codepen.io/krutie/pen/eoRXWP
      [h3]选择二[/h3]更好的是，我们可以将这个小的 SVG 路径标记提取到它自己的子组件中，并将 [code]index
      复制代码
      作为一个属性传递给它 —— 当然，还有其他必需的属性。
      在这个例子中，我们甚至可以使用计算属性来查找
      x2
      复制代码
      和
      x3
      复制代码
      。
      - 复制代码
      - 复制代码
      - 复制代码
      - [/code]
        [/list]这种方法可以让我们的代码更具条理，例如，我们可以为一个圆形剪切蒙版创建一个或多个子组件，如下所示。
        [list=1][*][code]
        复制代码
      - [/code]
        [/list][h3]配置面板[/h3][img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-cebd367fee74c99787336055b85394f7[/img]
        您可能已经在 CodePen 左上角看到了控制面板。它可以添加和删除数组中的元素。在 Option 2 中，我创建了一个子组件来容纳 Config Panel，使顶级 Vue 组件清晰可读。我们的 Vue 组件树看起来就像下面这样。
        [img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-e952327ce756687a8ad58f686896744c[/img]
        想知道 Option 2 的代码是什么样子的？下面的链接是在 CodePen 上使用了 Option 2 的代码。
        Option 2 - Bezier Curve Tree Diagram with Vue Js
        https://codepen.io/krutie/pen/Bexoez
        [h1]GitHub 仓库[/h1]最后，这里有一个为你准备的 GitHub Repo(https://github.com/Krutie/svg-tree-diagram)，你可以在进入下一部分之前查看该项目（使用选项 2）。
        [h1]家庭作业[/h1]尝试基于本文中介绍的逻辑在垂直模式下创建相同的图表。
        如果你认为，它是交换坐标系中的 [code]x
        复制代码
        值和
        y
        复制代码
        值一样简单的话，那么你是对的！因为最艰难的部分已经完成，在交换了所需的坐标后，再用适当的变量和方法更新代码。
        在 Vue.js 的帮助下，该图可以通过更多功能进一步扩展，例如，
        
        创建一个开关以便于在水平和垂直模式之间切换
        
        可以使用 GSAP 为路径设置动画
        
        从配置面板控制路径属性（例如颜色和笔触宽度）
        
        使用第三方工具库将图表保存并下载为图像/PDF
        
        现在试一试，如果需要的话，下面是家庭作业的答案链接。
        祝你好运！
        [h1]总结[/h1][code][/code] 是 SVG 中众多强大的元素之一，因为它允许你精确地创建图形和图表。在本文中，我们了解了贝塞尔曲线的工作原理以及如何创建一个自定义图表应用。
        利用现代 JavaScript 框架所使用的数据驱动方法进行调整总是令人生畏的，但 Vue.js 使它变得非常简单，并且还可以处理诸如 DOM 操作之类的简单任务。因此，作为一名开发人员，即使在处理具有明显视觉效果的项目时，你也可以用数据的方式进行思考。
        我已经意识到创建这个看起来很复杂的图表需要 Vue.js 和 SVG 的一些简单概念。如果你还没有准备好，我建议您阅读有关使用 Vue.js 构建交互式信息图(https://www.smashingmagazine.com/2018/11/interactive-infographic-vue-js/)的内容。读完那篇文章后再回过头阅读本文就会容易很多。这是家庭作业的答案。
        我希望你从这篇文章中学到了一些东西，并在阅读本文时能够感受到我当时创作时的乐趣。