Estoy tratando de consolar. Registrar el número aleatorio que se proporciona como ID para los elementos del objeto (círculos en este caso) cuando ocurre un evento de clic en los círculos que he creado. Lo intenté definiendo una función onClick y llamándola el módulo FruitBowl.js. Recibo un error indefinido al usar el siguiente código.

 import { select,range } from 'd3'; import {fruitBowl} from './fruitBowl'; const svg = select('svg'); const makeFruit = type => ({ type, id: Math.random() }); let fruits = range(5) .map(() => makeFruit('apple')); let selectedFruit= null; const onClick= d => { selectedFruit= d.id; render(); }; const render = () => { fruitBowl(svg,{ fruits, height:+svg.attr('height'), onClick }); }; render(); setTimeout(() => { fruits.pop(); render(); },1000); setTimeout(() => { fruits[2].type = 'lemon'; render(); },2000); setTimeout(() => { fruits = fruits.filter((d,i)=> i !==1); //to select all elements except element 2 render(); },3000);

A continuación se muestra el módulo fruitBowl.js que se exporta al archivo index.js.

 import { scaleOrdinal } from 'd3'; const colorScale = scaleOrdinal() .domain(['apple','lemon']) .range(['red','yellow']); const radiusScale = scaleOrdinal() .domain(['apple','lemon']) .range([50,30]); // function that does multiple operations like .enter and .exit export const fruitBowl = (selection,props) =>{ const {fruits,height,onClick} = props; const circles =selection.selectAll('circle') .data(fruits,d=>d.id); const xPosition = (d,i) => i*120+80; circles .enter().append('circle') .attr('cx',xPosition) .attr('cy',height/2) .attr('r',0) .merge(circles) //merge operation of enter and updates .attr('fill',d => colorScale(d.type)) .on("click",d => { console.log(d.id); }) .transition().duration(1000) .attr('cx',xPosition) .attr('r',d =>radiusScale(d.type)); //code to remove an element from the data circles.exit() .transition().duration(1000) .attr('r',0) .remove(); //.attr('fill','black'); };