jakezatecky / d3-funnel

A JavaScript library for rendering funnel charts using the D3.js framework.
http://jakezatecky.github.io/d3-funnel/
MIT License
330 stars 97 forks source link

Access click callback in angular #137

Closed aviralgoyal closed 3 years ago

aviralgoyal commented 3 years ago

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.

jakezatecky commented 3 years ago

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.

aviralgoyal commented 3 years ago

Thank you @jakezatecky it worked.