图可视化大促

// 引入D3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>

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

// 示例数据
const data = {
    nodes: [
        {id: "A", group: 1},
        {id: "B", group: 2},
        {id: "C", group: 1}
    ],
    links: [
        {source: "A", target: "B"},
        {source: "B", target: "C"}
    ]
};

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

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

// 绘制节点
const node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(data.nodes)
    .enter().append("circle")
    .attr("r", 10)
    .attr("fill", d => d.group === 1 ? "blue" : "red")
    .call(d3.drag()
        .on("start", dragStarted)
        .on("drag", dragged)
        .on("end", dragEnded));

// 更新节点位置
simulation.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);
});

// 拖动事件处理
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;
}