[英]Firing D3 event for an element
我已將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 事件?
您必須調度事件:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.