mounted() {     const self = this;     const node = this.getNode();     // 监听数据改变事件     node.on("change:data", ({ current }) => {       self.num = current.num;     });   },   methods: {     add() {       const node = this.getNode();       const { num } = node.getData();       node.setData({         num: num + 1,       });     },   },

在 X6 中，Graph 是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。

普通画布(未开启 scroller 模式)通过开启 panning 选项来支持拖拽平移。

拖拽可能和其他操作冲突，此时可以设置 modifiers 参数，设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。

还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。

可以通过以下 API 来启用/禁止画布平移：

普通画布(未开启 scroller 模式)通过开启 mousewheel 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：

常用的就是将画布内容中心与视口中心对齐，使用方式：

更多的居中方法可以查看 Transform

toSVG 方法还支持第二个参数：

preserveDimensions

preserveDimensions 用来控制导出 svg 的尺寸, 如果不设置，width 和 height 默认为 100%；如果设置为 true, width 和 height 会自动计算为图形区域的实际大小。还可以通过以下方式自定义尺寸：

viewBox

设置导出 svg 的 viewBox

copyStyles

是否复制外部样式表中的样式，默认是 true。开启 copyStyles 后，在导出过程中因为需要禁用所有样式表，所以页面可能会出现短暂的样式丢失现象。如果效果特别差，可以将 copyStyles 设置为 false。

stylesheet

自定义样式表

serializeImages

是否将 image 元素的 xlink:href 链接转化为 dataUri 格式

beforeSerialize

可以在导出 svg 字符串之前调用 beforeSerialize 来修改它。

toPNG/toJPEG 方法第二个参数除了 toSVG 的所有参数外，还支持以下参数：

width

导出图片的宽度

height

导出图片的高度

backgroundColor

导出图片的背景色

padding

图片的 padding

quality

图片质量，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92

我们可以调用 graph.dispose() 方法进行画布的销毁以及资源的回收。

作者： 阮一峰

日期： 2018年8月 6日

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

上面是 SVG 代码直接插入网页的例子。

SVG 代码也可以写在一个独立文件中，然后用、、、等标签插入网页。

CSS 也可以使用 SVG 文件。

SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。

SVG 代码都放在顶层标签之中。下面是一个例子。

的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。

如果只想展示 SVG 图像的一部分，就要指定viewBox属性。

属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。

注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

标签代表圆形。

上面的代码定义了三个圆。标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。

class属性用来指定对应的 CSS 类。

SVG 的 CSS 属性与网页元素有所不同。

标签用来绘制直线。

上面代码中，标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。

标签用于绘制一根折线。

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

标签用于绘制矩形。

的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

标签用于绘制椭圆。

的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

标签用于绘制多边形。

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

标签用于制路径。

的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。

标签用于绘制文本。

的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

标签用于复制一个形状。

的href属性指定所要复制的节点，x属性和y属性是左上角的坐标。另外，还可以指定width和height坐标。

标签用于将多个形状组成一个组（group），方便复用。

标签用于自定义形状，它内部的代码不会显示，仅供引用。

标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

上面代码中，标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。

标签用于插入图片文件。

上面代码中，的xlink:href属性表示图像的来源。

标签用于产生动画效果。

上面代码中，矩形会不断移动，产生动画效果。

的属性含义如下。

可以在多个属性上面定义动画。

标签对 CSS 的transform属性不起作用，如果需要变形，就要使用标签。

上面代码中，的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。

上面代码插入网页之后，就可以用 CSS 定制样式。

然后，可以用 JavaScript 代码操作 SVG。

上面代码指定，如果点击图形，就改写circle元素的r属性。

使用、、标签插入 SVG 文件，可以获取 SVG DOM。

注意，如果使用标签插入 SVG 文件，就无法获取 SVG DOM。

由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。

使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。

首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。

然后，当图像加载完成后，再将它绘制到元素。

下面将一张数据表格画成折线图。

上面的图形，可以画成一个坐标系，Date作为横轴，Amount作为纵轴，四行数据画成一个数据点。