"innerComponent is not a function" in CustomSVGSeries when animation is set.

[sradevski]

When trying to generate a CustomSVGSeries, I get the error written in the title. This only happens when animation is enabled. Also, if animation is enabled and I don't specify a customComponent function, it works properly.

I investigated the cause of it, and it seems that in the Animation component the customComponent field in the interpolated data object is turned into an object (instead of being a function as it is in the child.props.data).

My code:

const getMarkSeries = series =>
  <CustomSVGSeries
    key={`${series.id}mark`}
    animation
    data={series.data.map(entry => ({
      ...entry,
      size: 5,
      customComponent: () =>
        markShapesGenerator(series.markType, 5, {
          stroke: series.color,
          fill: series.color,
        }),
    }))}
  />;

react version: 15.6.1
react-vis version: 1.7.2

[mcnuttandrew]

Hey @sradevski

You've highlighted a problem we have unfortunately seen before (#579 among other places). Generally I'm working on a long term solution to address these interpolation issues, however I've also filed a PR (#600) that will allow you to specify your customComponent function at the root level (directly on the series rather on the datum). This should address the problem in letter, but not in spirit i think!

[sradevski]

@mcnuttandrew

Thank you for the very quick response. I also forgot to mention the props validation for the root level custom component, thanks for picking that one up as well. I will be waiting for the PR to be merged. 👍

[mcnuttandrew]

Fwiw, the long term solution to our interpolation problems relates this PR (d3/d3-interpolate#43)

[sradevski]

This is likely outdated by now and might not be relevant anymore. Reopen if necessary.