Inside .nodeContent in d3-organisation chart can we add onclik event for a div. I have tried to add onclick and written function in a script. But its showing an error like Uncaught ReferenceError: userInfo is not defined at HTMLDivElement.onclick. Here what i have done.
ngAfterViewInit() {
if (!this.chart) {
this.chart = new OrgChart();
}
this.updateChart();
}
updateChart() {
if (!this.data) {
return;
}
if (!this.chart) {
return;
}
this.chart
.nodeContent(function (d: any, i: any, arr: any, state: any) {
const color = '#FFFFFF';
const imageDiffVert = 25 + 2;
const userInfo = () => {};
return `
<script>
function userInfo(){
console.log('clicked')
}
</script>
<div style="position:absolute;right: 10px; top: 38px;" onclick="userInfo()"><img src="../../../../assets/svg/user-info.svg" ></div>
.container('.chart-container')
.compact(false)
.data(this.data)
.render();
}
I have tried writing fucntion outside return. But the function is calling initally and will not call after this node render
I just need to call the function userInfo() when clicking on div.