dchart-force-image

dchart-force-image

Usage no npm install needed!

<script type="module">
  import dchartForceImage from 'https://cdn.skypack.dev/dchart-force-image';
</script>

README

dchart-force-image

符合dchart规范的力引导图，结点可以换图片

安装

npm install dchart-force-image

用法

var Force = require('dchart-force-image');
var force = new Force(this.selector, {
  key : 'name',                //唯一标识结点
  margin: {left: 20, top: 20, right: 20, bottom: 20},
  charge: -600,                //电荷强度，引力/斥力
  linkDistance: 100,           //链接距离
  chargeDistance: 100,         //电荷距离
  radius: 20,                  //圆半径
  gravity: 0.1,                //重力
});
force.render({
  nodes: [{
    imgPath: '',
    name: 'hello1',
    className: 'group1'
  },{
    imgPath: 'iconfont-yulan.png',
    name: 'hello2',
    className: 'train'
  }],
  links: [{
    source: 'hello1',
    target: 'hello2'
  }]
});

案例

在根目录下, 启动
cube start
访问路径
http://localhost:9999/demo.html