我已將click事件附加到 D3 圖表的元素：
import * as d3 from 'd3';
const vis = {}
vis.svg = d3.select(element)
.append("svg")
.attr("width", 500)
.attr("height", 500)
vis.g = vis.svg
.append("g")
const circles = [20];
const myCircles = vis.g.selectAll('circle').data(circles).enter()
myCircles
.append('circle')
.attr('id', (d, i) => { return 'myCircle' i})
.attr('cx', 100)
.attr('cy', 100)
.attr('r', (d, i) => d)
.attr('fill', 'gainsboro')
.attr('stroke', 'grey')
.on('click', function(event, d) {
d3.select(this).attr('stroke', 'black')
d3.select(this).attr('stroke-width', '2px')
})
有沒有辦法click從元素外部觸發這個事件？我試過這樣做：
d3.select("#myCircle0").click();
但它不起作用。是否有針對特定元素觸發 D3 事件的替代方法？
uj5u.com熱心網友回復：
您必須調度事件：
d3.select("#myCircle0").dispatch("click");
這是一個稍微修改代碼的演示，將點擊分派到第一個圓圈：
顯示代碼片段
const vis = {}
vis.svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
vis.g = vis.svg
.append("g")
const circles = [20, 20, 20];
const myCircles = vis.g.selectAll('circle').data(circles).enter()
myCircles
.append('circle')
.attr('id', (d, i) => {
return 'myCircle' i
})
.attr('cx', (_, i) => 100 50 * i)
.attr('cy', 100)
.attr('r', (d, i) => d)
.attr('fill', 'gainsboro')
.attr('stroke', 'grey')
.on('click', function(event, d) {
d3.select(this).attr('stroke', 'black')
d3.select(this).attr('stroke-width', '2px')
});
d3.select("#myCircle0").dispatch("click");<script src="https://d3js.org/d3.v7.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/361243.html
標籤：javascript d3.js