Bar Chart Interactivity on click

[giorgikok]

Hello, I am trying to add chart interactivity and I've run into a problem. The selectionID of my chart that is kept in dataPoints does not seem to return correctly. After looking around and loggin the console I have found out that the datapoint being returned isn't of a regular type, it returns a t object with some cursor elements and the actual target rect.bar (+ a same looking srcElement). I was wondering if this is the correct approach and if so how would I access the selectionID of the individual bar in the bar chart?    

Here's the code:

Spoiler

.on('click', (dataPoint) => {

         console.log("CLICK DATA: ", dataPoint);

         console.log("CLICK DATA TARGET: ", dataPoint.target);

         console.log("CLICK DATA TARGET DATA: ", dataPoint.target.data);

         console.log("CLICK DATA TARGET DATA SELECTION ID: ", dataPoint.target.data.SelectionId.getKey());

        //const selected = !this.selectionManager.hasSelection();

        console.log("UPDATE SELECTION ID: ", dataPoint.selectionId);

        console.log("UPDATE SELECTION ID GETKEY: ", dataPoint.selectionId.getKey());

        if (!dataPoint.selectionId) {

            console.error("SelectionId is undefined for data point:", dataPoint);

            return;

        }

        this.selectionManager

            .select(dataPoint.selectionId, false)

            .then((ids: ISelectionId[]) => {

                this.syncSelectionState(barSelectionMerged, ids);

                barSelectionMerged.style("fill", (d: BarChartDataPoint) => {

                    return ids.length > 0 && dataPoint.selectionId.equals(dataPoint.selectionId) ? "#7ACA00" : "#AAAAAA";

                });

            });

    });

[giorgikok · Accepted solution]

figured it out: 

const clickData = d3.select(d.target).datum() as { selectionId: ISelectionId };

this is how you get the selectionId