Svelte鼠标事件中获取数据：使用e.target.__data__是否合规？

我正尝试为一系列由数据驱动的SVG圆形元素实现tooltip功能。我发现e.target.__data__包含所需数据，但不确定这是否属于最佳实践，使用它是否存在问题，且在e.currentTarget中找不到该数据。有趣的是，在Svelte环境中复现代码时，e.target.__data__返回undefined。

复现代码 #

<script>
    import * as d3 from "d3";
    export let data = [{id:1, x:50, y:50, firstName:"Fred"},
                       {id:2, x:100, y:100, firstName: "Mary"}]
    
    function handleMouseover(e) {
        console.log(e.currentTarget.attributes) // 返回命名节点映射，包含circle属性但无数据
        console.log(e.target.__data__) // 包含数据
    }
</script>

<svg>
    <g>
        <rect
          width="100%"
          height="100%"
          fill="transparent"
        />
            {#each data as d}
            <circle
                id={d.id}
                cx={d.x}
                cy={d.y}
                r=5
                fill="grey"
                stroke="white"
                on:mouseover|preventDefault={handleMouseover}
            >
            </circle>
        {/each}
    </g>
</svg>

• __data__的本质与局限性
  __data__是D3库内部用于存储绑定数据的私有属性，只有通过D3的data()、enter()等API绑定数据到DOM元素时，才会自动添加。它不属于D3公开API，依赖它的代码会因D3版本更新面临失效风险，绝非最佳实践。

• Svelte中__data__为undefined的原因
  你用Svelte的{#each}循环渲染SVG元素，流程和D3的数据绑定机制无关，DOM元素上不会被添加__data__属性，所以返回undefined。

• Svelte中获取数据的正确方式
  直接在事件绑定中传入当前数据项即可，无需通过DOM元素取数据：

  1. 修改事件绑定，传递当前数据d：

     <circle
         id={d.id}
         cx={d.x}
         cy={d.y}
         r=5
         fill="grey"
         stroke="white"
         on:mouseover|preventDefault={(e) => handleMouseover(e, d)}
     >
     

  2. 更新事件处理函数，直接接收数据：

     function handleMouseover(e, d) {
         console.log(d); // 直接拿到当前数据，可用于tooltip渲染
     }
     

  这种方式符合Svelte响应式开发逻辑，代码更稳定、易维护。

• e.currentTarget中无数据的原因
  currentTarget仅指向绑定事件的DOM元素本身，Svelte不会自动将数据挂载到DOM元素上，所以无法从中获取数据。而在D3场景中，__data__是D3额外添加的私有属性，和Svelte渲染机制无关。

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