Can you add event handlers to a VX linegraph?

[kevinxia787]

No description provided.

[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: #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 ***@***.***> 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 <#328>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHS6YUTDS37524DLCGQKW63PWQMB7ANCNFSM4FNCJBGQ> .