svg 树状图_GitHub - aute/SVGDragTree: 一个可以通过拖放 SVG 图标，来生成拥有树状结构的视图与数据的前端组件。 SDT example:...

SDT 是什么？

SDT 是 SVG Drag Tree 的缩写，一个可以通过拖放 SVG 图标，来生成拥有树形结构的视图与相应数据的前端组件。该组件不依赖任何其它库或框架，同时在样式上留给了用户极大的自由(因此，示例并不代表其最终样式)，其 .min.js 格式文件大小约为 13kb。

SDT 做了哪些工作

自动获取元素的大小，你无须担心元素会叠加在一起

你可以设置元素之间怎样放置的从属关系

有直线与曲线两种连线方式可以选择，你可以自己设置连线的颜色

元素间的上下边距也是可设置的，但列与列之间的宽度则是自动的

目标画布的大小由外层 DIV 决定，同时你可以自定义背景

提供了两种设置方法：直接在HTML进行设置，或是在JS脚本中进行设置

如果不进行设置，则组件会提供一套默认规则

提供了整个目标画布的全局拖动与缩放，以及一个回到目标画布中心的方法

你可以撤销或删除任意元素，其余元素会重新排布

可以返回两种类型的数据：精简版与完整版。精简版只包涵了元素类型、ID、从属关系，减少向后台发送的数据量，但精简版数据不可用于重绘。完整版包涵了精简版所包涵的所有数据，同时也包涵了绘图相关信息，放置顺序相关信息，可以用作重绘

是的，提供了接收“完整版数据”然后进行重绘的方法(示例中刚打开网页就在画布中已经生成树形结构的方法)

返回一个可监测的值，当用户放置不符合你的设置时，改变为放置错误信息

SDT 的应用场景

目前已被应用在了某云服务商的虚拟设备编排上，其他的或许做个思维导图也还不错？

SDT 的优势

基于 SVG 所以相对于 Canvas 类库继承了 SVG 的一些优势，例如可以与 CSS 、DOM 协同工作

原生 js 无依赖，轻量 13kb

引入方法

通过

注: 若通需过其他的 JS 脚本(如下面的 exampleScript.js)对组件进行设置或调用，则此 JS 文件需在 SDT.js 后引入

...

...

在 .html 文件中，可拖动的所有 SVG 图标被一个 class = "sdt-drag-element-lis" 的

标签包围，每个SVG图标分别被一个 class="sdt-drag-element" 的

标签包围

注：class="sdt-drag-element" 的

标签必须拥有 data-sdt-type 属性，属性值为字符串，用以说明此图标的类型

...

...

...