Блог

Я прикрепил 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) =gt; { return 'myCircle'   i})  .attr('cx', 100)  .attr('cy', 100)  .attr('r', (d, i) =gt; 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) =gt; {  return 'myCircle'   i  })  .attr('cx', (_, i) =gt; 100   50 * i)  .attr('cy', 100)  .attr('r', (d, i) =gt; 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"); 

 lt;script src="https://d3js.org/d3.v7.min.js"gt;lt;/scriptgt;