在 Analytics Dashboard LWC 中使用 d3.js 处理 click/hover 事件

Question

我目前正在尝试使用 d3 库构建 Analytics Dashboard LWC。我希望能够监听 SVG 元素上的某些事件，但是无论我尝试什么，该事件似乎都被忽略了。我最初认为这可能是不可能的，因为 Lightning Locker 服务，但看看这个 lwc-recipe here 你可以看到拖动和勾选事件处理程序工作正常。

这基本上就是我正在尝试的：

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（已记录 here）做一些简陋的东西，但没有雪茄。

我想做的事情可行吗？如果是这样，我如何才能在 LWC 中正确处理来自 d3 的事件？

编辑：我已经确认，如果我为记录页面或应用程序页面创建完全相同的组件，d3 事件处理得很好。但是，我正在将其构建为分析仪表板 LWC，并且在尝试让事件在 CRM 分析仪表板中工作时，没有任何反应。

Answer 1

我找到问题所在了。在 Analytics Studio 中，css 属性 pointer-events 默认设置为 none。为了让 SVG 具有交互性，我需要显式设置指针事件 css 属性:

  svg {
    pointer-events: all;
  }

在记录页面中，此属性默认设置为 all，这就是为什么我的组件在记录页面但在 Analytics Dashboard 中运行良好的原因。希望如果其他人运行在构建 Analytics Dashboard LWC 时遇到这个问题，这个 post 可以让你省去一天撞墙的时间。

编辑：CRM 分析团队已确认不会出现此行为。指针事件应在仪表板编辑页面中禁用，但应在预览页面中启用。 Summer '22 版本应该有一个修复程序，这个问题可能不再相关。

在 Analytics Dashboard LWC 中使用 d3.js 处理 click/hover 事件

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

d3.js

salesforce

salesforce-lightning

lwc