javascript 使用Plotly.js检索选区中包含的点

14ifxucb 于 2023-06-20 发布在 Java

关注(0)|答案(2)|浏览(139)

我试图检查图表中的点是否包含在预定义的选择中，因此我添加了一个选择框，其中包含layout部分的正确配置：

var N = 100;

function randomArray() {
  var output = new Array(N);
  for (var i = 0; i < N; i++) {
    output[i] = Math.random();
  }
  return output;
}

var myPlot = document.getElementById("plotly-graph");

var settings = [
  {
    mode: "markers",
    x: randomArray(),
    y: randomArray()
  }
];

var layout = {
  selections: [
    {
      type: "rect",
      x0: 0.1,
      x1: 0.2,
      xref: "x",
      y0: 0.1,
      y1: 0.2,
      yref: "y"
    }
  ]
};

var config = {};

Plotly.react(myPlot, settings, layout, config);

问题是，所选点的数组是空的，直到我手动添加另一个选择（使用与任务栏中的选择工具的手动交互）。之后，所有选择中的点都将正确包含在选定点的阵列中。我想找到一种方法来触发这个选择事件编程，而不必使用手动交互，这是可能的吗？关于如何解决这个问题有什么建议吗？
谢谢你！

JavaScript

来源：https://stackoverflow.com/questions/76432564/retrieve-the-points-contained-in-a-selection-with-plotly-js

2条答案

按热度按时间

unhi4e5o1#

从已知的点数组中获取已知矩形中的点如何？

var N = 100;

function randomArray() {
  var output = new Array(N);
  for (var i = 0; i < N; i++) {
    output[i] = Math.random();
  }
  return output;
}

var myPlot = document.getElementById("plotly-graph");

var settings = [
  {
    mode: "markers",
    x: randomArray(),
    y: randomArray()
  }
];

var layout = {};

var config = {};

Plotly.newPlot(myPlot, settings, layout, config);

function getPointsInRectangle(rect) {
  var xData = settings[0].x;
  var yData = settings[0].y;

  var selectedPoints = [];

  for (var i = 0; i < xData.length; i++) {
    if (
      xData[i] >= rect.x0 &&
      xData[i] <= rect.x1 &&
      yData[i] >= rect.y0 &&
      yData[i] <= rect.y1
    ) {
      selectedPoints.push({ x: xData[i], y: yData[i] });
    }
  }

  return selectedPoints;
}

var rect = {
  x0: 0.1,
  x1: 0.2,
  y0: 0.1,
  y1: 0.2
};

var selectedPoints = getPointsInRectangle(rect);
console.log(selectedPoints);

<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div style="width: 800px; height: 500px;" id="plotly-graph"></div>

这应该可以工作：

/* all the code from your question is here */

myPlot.on("plotly_selected", function(eventData) {
  var selectedPoints = eventData.points;
  console.log(selectedPoints);
});

// Programmatically trigger the selection event
var eventData = {points: selectedPoints};
myPlot.emit('plotly_selected', eventData);

赞(0）回复(0）举报 2023-06-20

sbtkgmzw2#

我在plotly库中记录了事件发出的所有数据，应该如下所示：

plotly_afterexport
plotly_afterplot
plotly_animated
plotly_animating
plotly_animatingframe
plotly_animationinterrupted
plotly_autosize
plotly_beforeexport
plotly_buttonclicked
plotly_click
plotly_clickannotation
plotly_deselect
plotly_doubleclick
plotly_framework
plotly_hover
plotly_react
plotly_redraw
plotly_relayout
plotly_relayouting
plotly_restyle
plotly_selected
plotly_selecting
plotly_sliderchange
plotly_sliderend
plotly_sliderstart
plotly_transitioned
plotly_transitioning
plotly_transitioninterrupted
plotly_unhover
plotly_update
plotly_webglcontextlost

探索plotly_react事件的事件数据，我使用它来绘制和更新图表，我在data对象中发现了selectedpoints：

{
    "data": [
        {
            "x": [
                0.01,
                ...,
                100
            ],
            "y": [
                0.0006,
                ...,
                0
            ],
            "mode": "markers",
            "selectedpoints": [
                4182,
                ...,
                4365
            ]
        }
    ],
    "layout": {
        "showlegend": false,
        "dragmode": "select",
        "shapes": [
            {
                "editable": true,
                "xref": "x",
                "yref": "y",
                "layer": "above",
                "opacity": 0.5,
                "line": {
                    "color": "#444",
                    "width": 4,
                    "dash": "solid"
                },
                "fillcolor": "green",
                "fillrule": "evenodd",
                "type": "rect",
                "x0": 39.021639200761186,
                "y0": 0.4910903426791277,
                "x1": 46.663120456707894,
                "y1": 0.3875887850467289
            }
        ],
        "selections": [
            {
                "editable": true,
                "xref": "x",
                "yref": "y",
                "layer": "above",
                "opacity": 0.5,
                "line": {
                    "color": "#444",
                    "width": 4,
                    "dash": "solid"
                },
                "fillcolor": "green",
                "fillrule": "evenodd",
                "type": "rect",
                "x0": 39.021639200761186,
                "y0": 0.4910903426791277,
                "x1": 46.663120456707894,
                "y1": 0.3875887850467289
            }
        ],
        "xaxis": {
            "type": "linear",
            "range": [
                -5.809272121788773,
                105.81927212178877
            ],
            "autorange": true
        },
        "yaxis": {
            "type": "linear",
            "range": [
                -1.1214953271028036,
                1.1214953271028036
            ],
            "autorange": true
        },
        "autosize": true
    }
}

因此，为了抓取图表的选定点，使用内置的选择函数，迭代每个数据对象（如果存在多于单个迹线）并将相对selectedpoints合并到所有选定点的数组中是否足够，例如wholeSelectedPoints。

var wholeSelectedPoints = [];

plotly_react_eventData['data'].forEach(element => {
    wholeSelectedPoints = [...wholeSelectedPoints, ...element['selectedpoints']]
});

console.log(wholeSelectedPoints);
// [object Array] (4)
// [4182,4365,10,20]

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 使用Plotly.js检索选区中包含的点

2条答案

相关问题

热门标签

最新问答