Click event in reusable - imported - chart does not work

Community Help
1

Hi everyone!

I want to create multiple charts iterating a configuration array, and rendering a chart for each variable in my dataset.

I am trying to assign an event to be triggered when bars are clicked. The event works fine when each chart is created directly but it doesn’t work when multiple charts are created from a loop (each function).

Each chart is created from a reusable version located in another notebook. The base chart can take a function passed as argument onClick, to be assigned to the click event.

Simple import of the base chart, with the click event working properly:

The problem is reproduced here:

¿Why the event is not assigned or being triggered? Any guidance is highly appreciated. Thanks in advance.

2

Hey ggojedap,

Thanks for your question, and sorry for the delayed response. I created a fork of your notebook and tried a few other approaches. I’m not sure exactly what’s happening in the d3.each method that’s blocking the click event, but here’s an alternative you can use to create the charts without using D3 for the iteration:

htl.html`${[...variables.keys()].map(d => BarChart(
  cs.groups.get(d).all(),
  variables.get(d).config
))}`

Let me know if you have any other questions, hope that helps!

3

Thank you Michael for your answer. I just checked the new fork and effectly your approach works perfeclty, so this resolve my problem.

Additionally, I explored a bit more about the d3.selection.html() function and I think (not shure yet) this function is removing the events and only appending the structure of the HTML passed as argument.