Vue2 添加数据可视化支持的方法步骤

npm install clay-core --save

import render from 'clay-core';
import Sizzle from 'sizzle';

let clay = render(window);
clay.config("$sizzleProvider", () => (selector, context) => Sizzle(selector, context));

export default clay;

npm install --save sizzle

import clay from './clay.js';

el: clay('#root')[0],

import clay from "./index.js";

clay("svg")
 .attr("width", 800)
 .attr("height", 700)

 // 使用组件
 .use("circleTree", {
  // 数据
  data: program.data,

  // 结点名称
  name: Item => Item.name,

  // 树的圆心和半径
  cx: 350,
  cy: 350,
  r: 300,

  // 树结构配置
  root: initTree => initTree,
  child: parentTree => parentTree.children,
  id: treedata =>
   treedata.name + (treedata.value ? "_" + treedata.value : "")
 });