1

我正在制作这个 96 网格的套索选择或框选择工具

在此处输入图像描述

我希望能够通过以下方式访问 Retool 中当前突出显示的井customComponent.model.selectedPoints

当前的情节代码是：

<style>
  body {
    margin: 0;
  }
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>

<script src="   https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<div id="react" />
<script type="text/babel">
    const Plot = createPlotlyComponent.default(Plotly);
  console.log(Plot);
  

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
      <Plot
        data={[
          {
            x: model.plotData.x,
            y: model.plotData.y,
            text: model.plotData.well,
            hoverinfo: 'text',
            mode: 'markers',
            type: 'scatter',
            marker: {color: 'blue', size: 20, opacity: 0.7},
          }
        ]}
        onClick={(v) => {
                    modelUpdate({ clickedPoint: v.points.map(p => ({ x: p.x, y: p.y, well: p.text })) })
        }}
        layout={ {title: 'Well Selector', 
        xaxis: {showgrid: false,
    zeroline: false,
    showline: false,
        side: 'top',
      fixedrange: true,
      tickvals:[1,2,3,4,5,6,7,8,9,10,11,12],
                ticktext: [1,2,3,4,5,6,7,8,9,10,11,12]},
        yaxis: {showgrid: false,
    zeroline: false,
    showline: false,
      fixedrange: true,
      tickvals:[1,2,3,4,5,6,7,8],
                ticktext: ['H','G','F','E','D','C','B','A']} } }
        style={ {width: "100%", height: "100%"} }
      />
  );

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>

您可以在下面看到它部分工作，但它只显示基于 onClick 的 selectedPoints （由于 .map 方法，它目前只返回一个点），特别是我需要以某种方式编辑线

onClick={(v) => {
    modelUpdate({ clickedPoint: v.points.map(p => ({ x: p.x, y: p.y, well: p.text })) })
        }}

...到正确的 JS 语法以返回所有突出显示的对象（通过套索或从 Plotly 模型中选择框，但我不知道变量/语法是什么）。

基本上是这样的：

onSelected={(v) => { 
                    modelUpdate({ selectedPoints: v.points.text })
        }}

我的理解是有一个 Plotly scatter selectedPoints 对象，但我不确定如何在上面的 JS 中访问它以将该对象添加到模型中。

在此处输入图像描述

更新

我只是添加了

onSelected={(v) => { 
                    modelUpdate({ selectedPoints: v.points.map(p => p.text) })
        }

现在我可以访问 component.model.selectedPoints 中的 selectedPoints 唯一的问题是，一旦我取消单击套索，套索突出显示颜色就不会持续存在，而且我每次都必须单击套索（我想我正在覆盖onSelected内部使用的函数)

4

0 回答 0