Animation example and xScale for AreaClosed

[EugeneDraitsev]

Hi, I tried to use this animation example and seems like it works supernice, but if I will try to update @vx/shape from 0.0.153 -> 0.0.184 it stop works because in 0.0.184 <AreaClosed /> don't have xScale prop (but still have yScale). I tried to search explanation of it in this repo and google it, but I didn't find anything about that. So, can you explain what the reason of removal xScale prop and how I can rewrite this code to use it without xScale:

const Graph = ({ interpolate, data, xScale, yScale }) => (
  <AreaClosed
    data={data.map((d, i) => ({ ...d, value: interpolate[i] }))}
    xScale={xScale}
    yScale={yScale}
    x={x}
    y={y}
    strokeWidth={2}
    stroke={'url(#PinkRed)'}
    fill={'url(#PinkRed)'}
    curve={curveBasis}
  />
)

[EugeneDraitsev]

Seems like I solved it. If someone will face with similar problem, then here you can find updated version of animation example and solution is:

const Graph = ({ interpolate, data, xScale, yScale }) => (
  <AreaClosed
    data={data.map((d, i) => ({ ...d, value: interpolate[i] }))}
    yScale={yScale}
    x={d => xScale(x(d))}
    y={d => yScale(y(d))}
    strokeWidth={2}
    stroke={'url(#PinkRed)'}
    fill={'url(#PinkRed)'}
    curve={curveBasis}
  />
)

[hshoff]

explanation is here: #383