Handling click/hover events with d3.js in Analytics Dashboard LWC

Question

I am currently trying to build an Analytics Dashboard LWC using the d3 library. I want to be able to listen for certain events on the SVG element, however no matter what I try it seems like that event is ignored. I initially thought that maybe it wasn't possible because of the Lightning Locker service, but looking at this lwc-recipe here you can see that the drag and tick event handlers are working fine.

This is basically what I am trying:

vis.js

import { LightningElement, api } from 'lwc';
import d3_lib from '@salesforce/resourceUrl/d3';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

export default class TimelineGraph extends LightningElement {
     _results;
    @api get results() {
        return this._results;
    }
    set results(value) {
        console.log(value);
        this._results = value;
        this.updateGraph();
    }

    updateGraph() {
        if (this.jsInitialized) {
            return;
        }

        Promise.all([
            loadScript(this, d3_lib + '/d3.min.js')
        ]).then(() => {
            this.jsInitialized = true;

            this.initializeGraph();
        }).catch(err => {
            console.error(err);
        }) 
    }

    initializeGraph() {
        try {
            const d3 = window.d3;
            // Create SVG
            const svg = d3.select(this.template.querySelector('.timeline-viz'))
                .append("svg")
                .attr("title", "My Title")
                .attr("id", "timeline")
                .attr("class", "my-svg")
                .attr("width", this.params.svg.width)
                .attr("height", this.params.svg.height)
                .on('mouseover', (event, d) => console.log("EVENT"));
                // Right here is where I would expect the mouseover event to be handled
                // however nothing is ever logged to the console with this code,
                // it appears that this event is ignored completely.
          
            // Then theres a bunch more code here but I've removed it because
            // I don't think it's important.
     }
}

vis.html

<template>
    <div class="timeline-viz" lwc:dom="manual"></div>
</template>

This graph is showing up as expected, however the event handler just doesn't work. I've tried to do some janky stuff with the this.template.addEventListener and this.addEventListener (documented here), but no cigar.

Is what I'm trying to do possible? And if so, how can I properly handle events from d3 inside of an LWC?

Edit: I have confirmed that the d3 events are handled just fine if I create this same exact component for a Record Page or an App Page. However I am building this as an Analytics Dashboard LWC, and when trying to get the events to work in a CRM Analytics dashboard, nothing is happening.

Answer 1

I found out what the issue is. In Analytics Studio, the css property pointer-events is set to none by default. In order to allow the SVG to be interactive, I needed to explicitly set the pointer events css property:

  svg {
    pointer-events: all;
  }

In record pages, this property is set to all by default, which is why my component works fine in record pages but not in an Analytics Dashboard. Hopefully if someone else is running into this issue while building an Analytics Dashboard LWC this post can save you a day of banging your head against the wall.

EDIT: The CRM Analytics team has confirmed that this behavior is not expected. Pointer events should be disabled in the dashboard edit page, but should be enabled in the preview page. A fix should be out for the Summer '22 release, and this issue may no longer be relevant.