jakezatecky/d3-funnel

Access click callback in angular

aviralgoyal opened this issue · 2 comments

As per the latest document in D3 JS funnel I have click event callback as referred by the documentation. But when I'm unable to access functions from inside angular component using this.try().

Here is the implementation, don't know how to implement it.

JS Code

const options = {
          chart: { bottomPinch: 1, animate: 200, height: 300 },
          block: {
            // dynamicHeight: true,
            // dynamicSlope: true,
            highlight: true,
          },
          events: {
            click: {
              block(d) {
                console.log(d.label.raw);
                this.try(d.label.raw);
              },
            },
          },
          tooltip: { enabled: true, }
        };
        const chart = new D3Funnel('#d3Funnel');
        chart.draw(data, options);
      })

HTML

<div id="d3Funnel"></div>

It gives the error

ERROR TypeError: this.try is not a function
    at SVGPathElement.block

I don't know how to resolve this.

I believe block(d) { ... } is just a shorthand for block: function(d) { ... }, which would not lexically bind this. I think if you replaced your event with an arrow function, such as block: (d) => { ... }, your code would be able to resolve this as you intend.

Thank you @jakezatecky it worked.