Accessing data from mouse event in Svelte

I’m trying to get a tooltip to work with data that is used to drive a series of svg elements, in this case circles.

I can see e.target.data contains the data, but I am unsure whether this is best practice. Are there any issues in using it? I can’t see it anywhere in e.currentTarget.

<script>
    import * as d3 from "d3";
    export let data
    
    function handleMouseover(e) {
        console.log(e.currentTarget.attributes) // Contains circle attrbutes but no data
        console.log(e.target.__data__) // contains data
    }
</script>

<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>