0

此处的ReactVis API概述了可能有用的可用内容。我已经成功地将“拖动选择”功能添加到我的自定义代码中。在图片中，我们将选择 13 到 17 并将fill值变为red例如。

更多伪代码问题，但代码会很棒。在此处输入图像描述

Hook 中的容器div如下所示：

<div className="unselectable"
  style={{ position: 'relative' }}
  onMouseDown={(e) => {
    if (!x && !y) {
      setX(e.clientX); setY(e.clientY)
    }
  }}
  onMouseMove={(e) => {
    if (x && y) {
      const newX = e.clientX; const newY = e.clientY;
      setX1(newX); setY1(newY);
      setRect(
        <div style={{
          zIndex: 10000,
          position: 'fixed',
          left: x > newX ? newX : x, top: y > newY ? newY : y,
          width: Math.abs(newX - x), height: Math.abs(newY - y),
          backgroundColor: 'gray', opacity: 0.2
        }} />
      )
    }
  }}
  onMouseUp={(e) => {
    setX(null); setY(null); setX1(null); setY1(null);
    setRect(null);
  }}
>
    <XYPlot>
        //...
    </XYPlot>
    {rect}
</div>

非常感谢。

4

1 回答 1

0

为了实现系列的“selected”与“notSelected”状态，我们需要使用“datawithcolor”对象作为我们的数据对象{x: foo, y: bar, color:0}：将这样的数组传递给 react-series 足以渲染不同颜色的系列（例如条形图）。例如：[{x: foo, y: bar, color:0}]where colorDomainwould be [0, 1]and the colorRangewill be some blueand red。

为了列出选定的“值”，我们可以在拖动矩形期间或绘制矩形之后保留处于反应状态（钩子或类）的值列表，仅在我的情况下在拖动过程中。每次矩形更改时，列表都必须更新。

在重新渲染时，为 React-vis 条形系列生成一个新的“datawithcolor”数组，其中颜色范围和域使用从onNearestX或类似的 React-vis 回调返回的索引定义。

我们如何更新selected列表？

<ReactSeries
          // see React-vis source of abstract-series.js for details
          /*
          onNearestX(value, {
            innerX: xScaleFn(value),
            index: valueIndex,
            event: event.nativeEvent
          });
          */
          onNearestX={(datapoint, { index, innerX }) => {
            // rect is mentioned in the question
            if (rect && isWithinRect({ x, x1, value: innerX })) {
              if (!selected.includes(index)) { // prevent rerender
                setSelected([...selected, index]);
              }
            } else {
              if (!rect) {              
                setSelected([index]); // single hover
              }
            }
          }}
          colorDomain={[0, 1]}
          colorRange={['red', 'blue']}
          data={dataWithColor} />

有关完整示例，请参阅此。

要记住的事情，管理矩形和选定列表是两件不同的事情。React-vis colorRange 现在应该很清楚了，文档对我没有太大帮助。

于 2020-02-03T22:42:07.803 回答