用分析仪表板LWC在分析中使用D3.j处理点击/悬停事件

Question

我目前正在尝试使用D3库来构建分析仪表板LWC。我希望能够聆听SVG元素上的某些事件，但是无论我尝试什么，似乎都忽略了该事件。我最初认为，由于闪电储物柜的服务，也许是不可能的，但是查看此lwc-recipe 在这里您可以看到Drag and Tick事件处理程序正常工作。

这基本上是我尝试的：

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.template.addeventlistener和this.addeventlistener（记录），但没有雪茄。

我想做的是可能的吗？如果是这样，我该如何正确处理LWC内D3的事件？

编辑：我已经确认，如果我为记录页面或应用程序页面创建相同的确切组件，则可以处理D3事件。但是，我将其作为分析仪表板LWC构建，并且在试图将事件在CRM Analytics仪表板中工作时，什么也不会发生。

Answer 1

我发现问题是什么。在Analytics Studio中，CSS属性Pointer-Evest默认情况下设置为无。为了允许SVG进行交互式，我需要明确设置指针事件CSS属性：

  svg {
    pointer-events: all;
  }

在记录页中，此属性设置为all默认情况下，这就是为什么我的组件在记录中正常工作页面，但不在分析仪表板中。希望，如果其他人在建立分析仪表板LWC的同时遇到了这个问题，那么这篇文章可以为您节省一天的撞击墙。

编辑：CRM Analytics团队已确认这一行为不会预期。指针事件应在仪表板编辑页面中禁用，但应在预览页面中启用。 22夏季版本应该解决问题，并且此问题可能不再重要。