Firing D3 event for an element

Question

I have attached a click event to an element of a D3 chart:

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')
    })

Is there a way to fire this click event from outside of an element? I tried doing this:

d3.select("#myCircle0").click();

But it does not work. Is there an alternative way of firing D3 event for a specific element?

Answer 1

You have to dispatch the event:

d3.select("#myCircle0").dispatch("click");

Here is a demo with a slightly modified code, dispatching the click to the first circle:

 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>