antv x6小
//初始化接触图
const graph = new X6.Graph({
container: document.getElementById('chart'),
// width: 800,
//height: $('#container').height()-10,
// grid:true,
background: {
color: 'translate', // 设置画布背景颜色
},
interacting:{
nodeMovable:false //禁用拖动节点
}
});//graph.centerContent()
// graph.fromJSON(data)
// graph.zoom(-0.5);
//graph.translate(80, 40) 平移
// graph.zoom(-0.53);
graph.addNode({//添加节点
id:'node'+i, //节点id
x: data[i]['x'], //节点x坐标
y: data[i]['y'],//节点y坐标
width: 113, //节点宽高
height: 129,
shape: 'html', //节点为html自定义节点
event: 'node:click', //每个节点绑定点击事件
html() { //节点html 可随意自定义
const wrap = `
${data[i].name}
${data[i].value}
`;
return wrap
}
})graphEl.addEdge(//节点连线（无柺点）
{
source:'node0', //id为node0的和node1相连
target:'node1',
attrs: {
line: { //线的颜色
stroke: '#75ffff',
},
},
}
)
//有拐点例子
graphEl.addEdge(
{
source:'node5', //节点id node5和node7相连
target:'node7',
vertices: [ //相连途中需要途径两个点
{ x: 968, y: 232}, //点1
{ x: 968, y: 242} //点2
],
attrs: {
line: { //连接线的颜色
stroke: '#75ffff',
},
},
}
)//graph为自定义的画布 为画布上的node绑定点击事件
graph.on('node:click', ({ view, e }) => {
e.stopPropagation() //禁止冒泡
console.log(view) //返回当前节点id等元素
console.log(e)
})