d3-organisation-chart, onclick event on inside node?

103 views Asked by At

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.

0

There are 0 answers