Example: D3 JavaScript Library — JavaScript (2)

今天我们来聊聊怎么在 Lightning Web Components 里用 D3 做一个漂亮的力导向图。 首先，核心方法是 `initializeD3`，它用了 D3 的模拟、链接和节点这套经典模式。 但要注意，在 LWC 里，我们不能像平时写普通网页那样直接用 `document.querySelector` 去拿 DOM 元素，必须改成 `this.template.querySelector('svg.d3')`。为什么？因为 LWC 强制要求 DOM 访问必须封闭在组件自己的影子 DOM 里，用 `this.template` 前缀就相当于告诉你：“嘿，只能在自己组件这片小天地里找元素，别去外面乱翻。”这样能保证组件的封装性，不会污染别人，也别被别人影响。 数据是从本地的一个 `/data` 模块导入的，里面有节点和链接的信息。D3 的力模拟器会启动，加上三种力：链接力、电荷力和向心力，让整个图自然散开，节点像有弹性一样被链接拉着，同时又互相排斥。 链接画出来是线条，线条的粗细不是随便定的，而是和链接的值（value）的平方根成正比，这样视觉上更直观。节点呢，是彩色的圆圈，按组（group）着色，而且还能拖拽，鼠标按住就能移动，很灵活。 当你把鼠标悬停在某个节点上时，会自动弹出一个工具提示，显示这个节点的 ID，让你知道它是谁。 最后别忘了 `tick` 函数，它会在每一帧模拟步骤里不断更新所有节点和链接的位置，这样动画就动起来了。 这样，一个动态、可交互的力导向图就在 LWC 里立起来了。关键在于记住用 `this.template.querySelector` 去锁定你的 SVG 容器，剩下的事情就和常规 D3 开发差不多啦。