1

has anyone used react-vis? I'm trying to render the Marks over line series when the user hovers over the chart.

The problem is it keeps on throwing an error

x is not a function.

Has anyone run into such kind of issue? the error comes when I try to render marks or try to show tooltip over the line series.

Here is my render function 

<XYPlot
  onMouseLeave={this.handleMouseOver}
  handleMouseOver={this.handleMouseOver}
  xAxis={{
    tickValue: xAxis,
    tickFormat: this.formatXAxisTick,
    timeUnit: TIMEUNIT[chartHorizontalUnit]
  }}
  yAxis={{
    tickValue: yAxisLabelArray,
    tickFormat: value => `${value} ${chartVerticalUnit}`
  }}
>
  {lineList.map((line, index) => (
    <LineSeries
      key={index}
      {...line.toJS()}
      curve="curveMonotoneX"
      selected={
        isNull(selectedLegendValue) || line.get("label") === selectedLegendValue
      }
      {...(line.get("data").size === 1 ? { sizeDomain: [] } : null)}
      onNearestX={(datapoint, { index, event, innerX }) =>
        this.handleMouseOver(datapoint, event, innerX)
      }
    />
  ))}

  {toolTipValue && toolTipValue.size && (
    <>
      {toolTipValue.map((lineData, i) => (
        <MarkSeries
          key={`mark-${i}`}
          color={lineData.get("label")}
          stroke="white"
          strokeWidth={2}
          data={[
            {
              x: lineData.get("x"),
              y: lineData.get("y")
            }
          ]}
        />
      ))}
    </>
  )}
</XYPlot>;

XYPlot is a wrapper around react-vis XYPlot. XAxis and YAxis. Did anyone else run into such kind of issue?

Here is the screenshot of the error

enter image description here

4

1 回答 1

2

所以我能够弄清楚这里出了什么问题。您不能将 react-vis 组件包装在包装器中。如果我们真的想将它包装在包装器中，那么我们将不得不像调用函数一样调用包装器。

使用 React.Fragment · 问题 #1095 · uber/react-vis

于 2020-03-19T07:50:39.953 回答