d3.js力导向图svg缩放

// 创建SVG容器
const svg = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 600);

// 创建一个g元素作为缩放的目标
const g = svg.append("g");

// 定义缩放行为
const zoom = d3.zoom()
    .scaleExtent([0.5, 5]) // 设置缩放范围
    .on("zoom", (event) => {
        g.attr("transform", event.transform); // 应用缩放变换
    });

// 将缩放行为应用到SVG元素
svg.call(zoom);

// 添加力导向图
const simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(d => d.id))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(400, 300));

// 假设有一些节点和边的数据
const nodes = [{id: "A"}, {id: "B"}, {id: "C"}];
const links = [{source: "A", target: "B"}, {source: "B", target: "C"}];

// 添加边
const link = g.selectAll(".link")
    .data(links)
    .enter().append("line")
    .attr("class", "link");

// 添加节点
const node = g.selectAll(".node")
    .data(nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 10);

// 更新力导向图的位置
simulation
    .nodes(nodes)
    .on("tick", () => {
        link
            .attr("x1", d => d.source.x)
            .attr("y1", d => d.source.y)
            .attr("x2", d => d.target.x)
            .attr("y2", d => d.target.y);

        node
            .attr("cx", d => d.x)
            .attr("cy", d => d.y);
    });

// 启动模拟
simulation.alpha(1).restart();