我目前正在嘗試使用 d3 庫構建 Analytics Dashboard LWC。我希望能夠監聽 SVG 元素上的某些事件，但是無論我嘗試什么，似乎該事件都被忽略了。我最初認為這可能是因為 Lightning Locker 服務，但查看這個 lwc-recipe在這里你可以看到拖動和滴答事件處理程式作業正常。
這基本上是我正在嘗試的：
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.addEventListenerand this.addEventListener（在此處記錄）做一些笨拙的事情，但沒有雪茄。
我正在嘗試做的事情可能嗎？如果是這樣，我怎樣才能正確處理來自 LWC 內 d3 的事件？
編輯：我已經確認，如果我為記錄頁面或應用程式頁面創建相同的組件，則可以很好地處理 d3 事件。但是，我將其構建為 Analytics Dashboard LWC，當試圖讓事件在 CRM Analytics 儀表板中作業時，什么也沒有發生。
uj5u.com熱心網友回復：
我發現了問題所在。在 Analytics Studio 中，css 屬性默認pointer-events設定為none。為了讓 SVG 具有互動性，我需要顯式設定指標事件 css 屬性：
svg {
pointer-events: all;
}
在記錄頁面中，此屬性all默認設定為，這就是為什么我的組件在記錄頁面中運行良好但在分析儀表板中無法正常運行的原因。希望如果其他人在構建 Analytics Dashboard LWC 時遇到了這個問題，這篇文章可以為您節省一天的時間。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/472044.html