antv x6小

最新推荐文章于 2024-03-19 20:39:48 发布

不宅的程序园

最新推荐文章于 2024-03-19 20:39:48 发布

阅读量1.3k

点赞数

分类专栏：画图文章标签：前端 javascript html

本文链接：https://blog.csdn.net/zyz_3362/article/details/127107634

版权

本文介绍了如何使用AntV X6进行图形操作，包括中心内容、加载数据、缩放和平移等关键步骤，展示前端图形库在JavaScript和HTML环境中的应用。

摘要由CSDN通过智能技术生成

 //初始化接触图
               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,
                          sha