图可视化双11优惠活动

// 假设我们有一个简单的图数据结构
const graphData = {
  nodes: [
    { id: 'A', group: 1 },
    { id: 'B', group: 2 },
    // ...更多节点
  ],
  links: [
    { source: 'A', target: 'B', value: 1 },
    // ...更多边
  ]
};

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

// 创建力导向图布局
const simulation = d3.forceSimulation(graphData.nodes)
    .force("link", d3.forceLink(graphData.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(graphData.links)
  .enter().append("line")
    .attr("stroke-width", d => Math.sqrt(d.value));

// 绘制节点
const node = svg.append("g")
    .attr("class", "nodes")
  .selectAll("circle")
  .data(graphData.nodes)
  .enter().append("circle")
    .attr("r", 5)
    .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;
}