Shape click event does not seem to be available

Chưa có ai nhận issue này.

Hello,

it seems that the shape click event is not yet available.

I have a heatmap on which I draw rectangles using "drawrect" button and I want to trigger an event when I click on one, in order to get the shape's index, but I can't find any plotly event already existing that triggers in that situation.

I found in draw.js script from the source code (draw.js) the function that is automatically triggered when a shape is clicked on to change its style and make it draggable, resizable, or erasable (line 189):

path.node().addEventListener('click', function() { return activateShape(gd, path); });

Therefore, I believe there should be a way to add actions to this ‘click’ event and obtain its index as well.

I have also read about some dependencies with the dragmode and clickmode attributes’ values, but I am unable to proceed with them.

A simple example is available here codepenExample or here:

HTML:

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

<body>
<div id="graph"></div>
</body>

JS:

  {
    editable: true,
    label: { text: "" },
    xref: "x",
    yref: "y",
    layer: "above",
    opacity: 1,
    line: { color: "white", width: 5, dash: "solid" },
    fillcolor: "rgba(0, 0, 0, 0)",
    fillrule: "evenodd",
    type: "rect",
    x0: 0.5,
    y0: 0,
    x1: 0.75,
    y1: 1.5
  }
];

var fig = {
  data: [
    {
      z: [
        [1, 20, 30],
        [20, 1, 60],
        [30, 60, 1]
      ],
      type: "heatmap"
    }
  ],
  layout: {
    title: "Heatmap with drawn rectangles",
    shapes: shapes,
    dragmode: "drawrect",
    clickmode: "event+select"
  },
  config: {
    displayModeBar: true,
    modeBarButtons: [[], ["zoom2d", "drawrect", "eraseshape", "autoScale2d"]]
  }
};

var gd = document.getElementById("graph");

Plotly.plot(gd, fig);

gd.on("plotly_click", function (d) {
  alert("plotly click");
  console.log(d);
});

gd.on("plotly_relayouting", function (d) {
  alert("plotly relayouting");
  console.log(d);
});

// gd.on("plotly_relayout", function(d) {
//   alert("plotly relayout")
//   console.log(d)
// })

// gd.on("plotly_selected", function(d) {
//   alert("plotly selected")
//   console.log(d);
// });

// gd.on("plotly_selecting", function(d) {
//   alert("plotly selecting")
//   console.log(d);
// });

If it doesn't exist yet, it would be nice to implement it =)!

Thanks a lot,
YP

Bắt đầu trong src/components/shapes/draw.js tại trình xử lý nhấp chuột gọi activateShape, sau đó so sánh nó với các sự kiện plotly_click và plotly_relayouting trong ví dụ được cung cấp. Xác định cách một lần nhấp vào shape nên được cung cấp và chỉ mục của nó nên được báo cáo như thế nào; hoàn thành có nghĩa là ví dụ có thể nhận sự kiện đó và xác định shape được nhấp.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Hướng dẫn đóng góp

Bắt đầu từ đâu

Hướng nghiên cứu

Đánh giá