D3JS 实例化

原创

已于 2024-04-10 23:41:50 修改 · 507 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #数据可视化 #vue.js

于 2024-04-07 19:33:29 首次发布

本文介绍了如何使用D3.js在React环境中创建一个可缩放并具有局部网格背景的绘图组件，涉及画布缩放控制、网格背景的添加以及圆形的绘制方法。

目的

初始结构

目的

将d3.js进行实例化，一系列操作放于实例中定义。

初始结构

d3Canvas.js

export default class d3Canvas {
    constructor(parentNodeId) {
        this.parentNodeId = parentNodeId;
        this.svg = reactive({});
        this.g = reactive({});
        this.currentGraph = ref(null);
        this.currentWatch = null;
    }
    
    init() {
        // 获取父节点
        var parentNode = document.getElementById(this.parentNodeId);
        if (!parentNode) {
            console.error('父节点不存在');
            return;
        }

        // 初始化画布元素
        var d3Canvas = document.createElement('div');
        d3Canv