Can you add event handlers to a VX linegraph?

[hshoff]

yup!

onClick={data => event => console.log('click')}

[kevinxia787]

@hshoff Thanks for the quick reply! Is there a way to isolate the point that I click on? Because if I do

onClick={data => event => console.log(data)} I get the data array used to plot the line, not the specific entry.

[hshoff]

Ah I see, it takes a bit more work to make that work on a LinePath. Check out this tutorial from @browniefed and the tooltip section for mapping an event position to a data point https://codedaily.io/tutorials/39/Make-a-Beautiful-Interactive-Bitcoin-Price-Chart-with-React-D3-and-VX#Tooltip-Handler

[Achilles718611]

It doesn't work in recent vx version.

It worked in @vx/shape 0.0.179, but it seems doesn't work in 0.0.184.

This is full code. {Object.keys(data).map(key => { const lineStroke = lineStrokeSet[key]; return ( <LinePath key={key} data={data[key]} curve={curveBasis} x={d => xScale(xSelector(d))} y={d => yScale(ySelector(d))} strokeWidth={2} stroke={lineStroke} strokeLinecap="round" fill="transparent" onClick={data => event => { console.log('**&&&&&&&&&&&&'); this._handleLineSelect(event); }} onMouseMove={data => event => { console.log('*****'); if (tooltipTimeout) clearTimeout(tooltipTimeout); this._showTooltip({ event, data, xScale, yScale }); }} onMouseLeave={data => event => { tooltipTimeout = setTimeout(() => { this._hideTooltip(); }, 300); }} onTouchEnd={data => event => { tooltipTimeout = setTimeout(() => { this._hideTooltip(); }, 300); }} onTouchMove={data => event => { if (tooltipTimeout) clearTimeout(tooltipTimeout); this._showTooltip({ event, data, xScale, yScale }); }} /> ) })}

[hshoff]

@Achilles718611 Correct, there was a breaking change in v0.0.181 for details please see: https://github.com/hshoff/vx/pull/383

-  onClick={data => event => this._handleLineSelect(event)}
+  onClick={event => this._handleLineSelect(event)}

[Achilles718611]

Thanks for your kind reply. But I have to pass data in click event.

[hshoff]

data is defined in the outer scope so it's still available to use in your event handlers:

<LinePath
  data={data[key]}
  // ...
  onClick={event => {
    console.log('my data', data[key]);
    this._handleLineSelect(event);
  }}
/>

[Achilles718611]

data is object which is consist of key and value(array). So data[key] is array. I would like to pass one element of array. When I use 0.0.179, it's possible. d => event => { ..... } In 0.0.179 d is what I want to pass value.

[hshoff]

Here's an example of how to accomplish this: https://codesandbox.io/s/bitcoinchart-syeeo?fontsize=14&module=%2Fsrc%2FApp.js

[Achilles718611]

Got it. Thank you.

On Wed, May 22, 2019 at 12:00 AM Harrison Shoff notifications@github.com wrote:

Here's an example of how to accomplish this: https://codesandbox.io/s/bitcoinchart-syeeo?fontsize=14&module=%2Fsrc%2FApp.js

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hshoff/vx/issues/328?email_source=notifications&email_token=AHS6YURKUBPC7TA6RGCVMTDPWQMB7A5CNFSM4FNCJBG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV4MCYQ#issuecomment-494453090, or mute the thread https://github.com/notifications/unsubscribe-auth/AHS6YUTDS37524DLCGQKW63PWQMB7ANCNFSM4FNCJBGQ .