有没有一种在JavaScript中构建交互式节点图的方法？

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

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

// 数据
const graph = {
    nodes: [
        {id: "A"},
        {id: "B"},
        {id: "C"}
    ],
    links: [
        {source: "A", target: "B"},
        {source: "B", target: "C"},
        {source: "C", target: "A"}
    ]
};

// 添加链接
const link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width", 2);

// 添加节点
const node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 10)
    .call(d3.drag()
        .on("start", dragStarted)
        .on("drag", dragged)
        .on("end", dragEnded));

// 更新节点和链接的位置
simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

simulation.force("link")
    .links(graph.links);

function ticked() {
    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);
}

function dragStarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}

function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
}

function dragEnded(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}

const cy = cytoscape({
    container: document.getElementById('cy'),

    elements: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        { data: { id: 'ab', source: 'a', target: 'b' } }
    ],

    style: [
        {
            selector: 'node',
            style: {
                'background-color': '#666',
                'label': 'data(id)'
            }
        },

        {
            selector: 'edge',
            style: {
                'width': 3,
                'line-color': '#ccc',
                'target-arrow-color': '#ccc',
                'target-arrow-shape': 'triangle',
                'curve-style': 'bezier'
            }
        }
    ],

    layout: {
        name: 'grid',
        rows: 1
    }
});

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv", {
    "undoManager.isEnabled": true
});

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text", "key"))
  );

myDiagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", color: "lightgreen" },
    { key: "Delta", color: "pink" }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Gamma" },
    { from: "Beta", to: "Delta" },
    { from: "Gamma", to: "Delta" }
  ]);

const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });

const paper = new joint.dia.Paper({
    el: $('#paper'),
    model: graph,
    width: 800,
    height: 600,
    gridSize: 10
});

const rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'My Rectangle',
        fill: 'white'
    }
});
rect.addTo(graph);

const rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('body/fill', 'red');
rect2.addTo(graph);

const link = new joint.shapes.standard.Link();
link.source(rect); // or link.source({ id: rect.id })
link.target(rect2); // or link.target({ id: rect2.id })
link.addTo(graph);