While working with my axis, I encountered an issue when trying to dispatch a React event along with a payload. What I noticed was that when I used console.log('item'), a pointer event was being logged instead of the expected item property. Is this the correct method for triggering a dispatch event using D3.js?
axisGroup
.selectAll('.tick')
.data<BaseItemI>(itemsInDomain)
.style('cursor', 'pointer')
.on('click', function (item) {
console.log('clicked', item);
// dispatch.arguments = { type: SET_SELECTED_ITEM, payload: item };
dispatch({
type: SET_SELECTED_ITEM,
payload: { item: item, baseItem: undefined }
});
});
I attempted to use the dispatch feature from D3 but found it to be confusing. I also tried using a callback function instead of an anonymous one, however, the behavior remained the same.
.on('click', (item) => {
console.log('clicked', item);
dispatch({
type: SET_SELECTED_ITEM,
payload: { item: item, baseItem: undefined }
});
});