D3.js时间网络节点位置重置致抖动及饼图切片更新异常

一、节点拖动滑块时重置抖动的问题 #

原因 #

每次滑块触发更新时，你通过map创建了全新的节点对象，这些新对象没有保留原节点的位置（x/y）和运动状态（vx/vy）。D3力导向图的模拟（simulation）依赖节点对象的这些属性维持当前布局，新对象会让模拟从头开始计算，导致节点每次重置到初始位置，产生抖动。

修复方案 #

不要创建全新的节点对象，而是复用原节点的状态，仅更新received属性：

1. 修改滑块事件中的节点过滤逻辑，复制原节点的所有属性（包括位置和运动状态），只更新received数组：

rangeSlider.on("onchange", (val) => {
  currentValue = Math.ceil(timeScale(val));
  
  // 过滤节点并保留原状态，仅更新received
  const filteredNodes = userNetworkData.nodes.filter(
    (d) => new Date(d.start) <= val
  ).map((d) => {
    // 复制原节点的所有属性（x/y/vx/vy等），仅替换received
    return {
      ...d,
      received: d.received.filter((r) => new Date(r.user_timestamp) <= val),
    };
  });

  // 链接过滤与映射逻辑保持不变
  const filteredLinks = userNetworkData.links.filter(
    (d) => new Date(d.start) <= val
  );
  const filteredLinksFiltered = filteredLinks.filter(
    (d) => filteredNodes.some(o => o.id == d.source.id) && filteredNodes.some(o => o.id == d.target.id)
  );
  const filteredLinksMapped = filteredLinksFiltered.map((d) => {
    return {
        ...d,
        source: filteredNodes.find(x => x.id==d.source.id),
        target: filteredNodes.find(x => x.id==d.target.id)
    };
  });

  update(filteredNodes, filteredLinksMapped);
});

2. 更高效的方式：直接修改原节点的received属性，再过滤节点（无需创建新对象）：

rangeSlider.on("onchange", (val) => {
  currentValue = Math.ceil(timeScale(val));
  
  // 直接更新原节点的received数组
  userNetworkData.nodes.forEach(d => {
    d.received = d.received.filter(r => new Date(r.user_timestamp) <= val);
  });
  
  // 过滤出当前时间范围内的节点
  const filteredNodes = userNetworkData.nodes.filter(
    (d) => new Date(d.start) <= val
  );

  // 链接过滤（无需重新映射source/target，因为节点引用未变）
  const filteredLinks = userNetworkData.links.filter(
    (d) => new Date(d.start) <= val && 
           filteredNodes.some(o => o.id == d.source.id) && 
           filteredNodes.some(o => o.id == d.target.id)
  );

  update(filteredNodes, filteredLinks);
});

二、饼图切片大小不一致的问题 #

原因 #

D3的pie生成器默认会读取数据项的value属性计算切片角度，但你的received数组元素没有该属性，导致所有切片的value为undefined，生成器无法正确分配角度，出现大小不均。

修复方案 #

初始化pie生成器时，指定固定的value访问器，让每个切片权重相等：

// 初始化pie生成器，设置每个切片的value为1，确保大小一致
const pie = d3.pie()
  .value(() => 1);

同时，在update函数中完善饼图路径的更新逻辑，加入过渡动画并处理退出的切片：

paths = node
  .selectAll("path")
  .data(function (d) {
    return pie(d.received);
  })
  .join(
    // 处理新增切片
    enter => enter.append("svg:path")
      .attr("class", "path")
      .attr("opacity", 0)
      .attr("stroke", d => color(d.data.receiver))
      .attr("stroke-width", radius * 0.2)
      .attr("fill", (d, i) => color(d.data.giver))
      .attr("cursor", "pointer")
      .on("mousemove", function (event, d) {
        div.transition().duration(200).style("opacity", 0.9);
        div.html(parse_message(d.data))
          .style("left", event.pageX + 20 + "px")
          .style("top", event.pageY - 28 + "px");
      })
      .on("mouseout", function () {
        div.transition().duration(500).style("opacity", 0);
      })
      .call(enter => enter.transition().attr("d", arc).attr("opacity", 1)),
    // 处理现有切片的更新
    update => update.transition().attr("d", arc),
    // 处理需要移除的切片
    exit => exit.transition().attr("opacity", 0).remove()
  );

内容的提问来源于stack exchange，提问作者Michael Higgins