[Bug]: Fisheye plugin，在触发update时，this.r/this.d没有同步更新 #6955

问题描述

我在编写fisheye的在线体验，发现调整r/d参数时，均不会生效，如图：

完整代码

```js | ob { pin: false }
createGraph(
  {
    data: {
      nodes: [
        // 中心区域节点
        { id: 'node-0', style: { x: 300, y: 150 } },
        ...Array.from({ length: 8 }, (_, i) => ({
          id: `node-${i + 1}`,
          style: { 
            x: 300 + Math.cos(i * Math.PI / 4) * 60,
            y: 150 + Math.sin(i * Math.PI / 4) * 60
          }
        })),
        // 外围节点 - 第一圈
        ...Array.from({ length: 16 }, (_, i) => ({
          id: `node-${i + 9}`,
          style: {
            x: 300 + Math.cos(i * Math.PI / 8) * 120,
            y: 150 + Math.sin(i * Math.PI / 8) * 120
          }
        })),
        // 外围节点 - 第二圈
        ...Array.from({ length: 20 }, (_, i) => ({
          id: `node-${i + 25}`,
          style: {
            x: 300 + Math.cos(i * Math.PI / 10 + 0.2) * 180,
            y: 150 + Math.sin(i * Math.PI / 10 + 0.2) * 180
          }
        })),
        // 零散节点
        ...Array.from({ length: 10 }, (_, i) => ({
          id: `node-${i + 45}`,
          style: {
            x: 200 + Math.random() * 200,
            y: 50 + Math.random() * 200
          }
        }))
      ],
      edges: [
        // 中心到第一圈的连接
        ...Array.from({ length: 8 }, (_, i) => ({
          id: `edge-${i}`,
          source: 'node-0',
          target: `node-${i + 1}`
        })),
        // 第一圈之间的连接
        ...Array.from({ length: 8 }, (_, i) => ({
          id: `edge-${i + 8}`,
          source: `node-${i + 1}`,
          target: `node-${((i + 1) % 8) + 1}`
        })),
        // 第一圈到第二圈的连接
        ...Array.from({ length: 16 }, (_, i) => ({
          id: `edge-${i + 16}`,
          source: `node-${Math.floor(i/2) + 1}`,
          target: `node-${i + 9}`
        })),
        // 第二圈到第三圈的连接
        ...Array.from({ length: 20 }, (_, i) => ({
          id: `edge-${i + 32}`,
          source: `node-${i + 9}`,
          target: `node-${i + 25}`
        })),
        // 随机额外连接
        ...Array.from({ length: 15 }, (_, i) => ({
          id: `edge-${i + 52}`,
          source: `node-${Math.floor(Math.random() * 45)}`,
          target: `node-${Math.floor(Math.random() * 45)}`
        }))
      ]
    },
    autoFit: 'view',
    node: {
      style: {
        size: (datum) => Math.random() * 15 + 15, // 稍微调小节点大小
        label: false,
        labelText: (datum) => datum.id,
        labelBackground: true,
      },
      palette: {
        type: 'group',
        field: (datum) => datum.id,
        color: ['#1783FF', '#00C9C9', '#F08F56', '#D580FF'],
      },
    },
    edge: {
      style: {
        stroke: '#e2e2e2',
        opacity: 0.5,
        lineWidth: 0.5, // 边线变细
      },
    },
    // behaviors: ['drag-canvas', 'zoom-canvas'],
    plugins: [{ 
      type: 'fisheye',
      key: 'fisheye',
      r: 120,
      d: 1.5,
      nodeStyle: { label: true }
    }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const TRIGGER_OPTIONS = ['pointermove', 'drag', 'click'];
    const SCALE_OPTIONS = ['wheel', 'drag', '-'];

    const options = {
      type: 'fisheye',
      trigger: 'pointermove',
      r: 120,
      d: 1.5,
      maxR: 200,
      minR: 50,
      maxD: 5,
      minD: 0.5,
      scaleRBy: '-',
      scaleDBy: '-',
      showDPercent: true,
      preventDefault: true,
    };

    const optionFolder = gui.addFolder('Fisheye Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'trigger', TRIGGER_OPTIONS);
    optionFolder.add(options, 'r', 50, 200, 10);
    optionFolder.add(options, 'd', 0.5, 5, 0.1);
    optionFolder.add(options, 'scaleRBy', SCALE_OPTIONS);
    optionFolder.add(options, 'scaleDBy', SCALE_OPTIONS);
    optionFolder.add(options, 'showDPercent');
    optionFolder.add(options, 'preventDefault');

    optionFolder.onChange(({ property, value }) => {
      graph.updatePlugin({
        key: 'fisheye',
        [property]: value === '-' ? undefined : value,
      });
      graph.render();
    });
  },
); 

原因分析

追查fisheye代码发现update方法在调用时，新的options并没有重新赋值给this.r/this.d，重新赋值后即修复问题，如图：

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他