Shape click event does not seem to be available

説明

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

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。

着手することを issue にコメントします — 二人が同じ作業をするのを防げます。

リポジトリをフォークし、ブランチを切って変更します。

issue 番号を参照したプルリクエストを送ります。

調査の方向性

src/components/shapes/draw.js の activateShape を呼び出すクリックハンドラーから始め、提供された例の plotly_click イベントおよび plotly_relayouting イベントと比較します。shape のクリックをどのように公開すべきか、またそのインデックスをどのように報告すべきかを判断します。例がそのイベントを受け取り、クリックされた shape を特定できれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック

javascript

領域

data-visualization

issue の種類

機能追加

難易度

4/5

見積もり時間

3〜5日

活発さ

停滞

明瞭さ

おおむね明確

初心者へのやさしさ

38/100

説明

コントリビューションガイド

はじめの一歩

調査の方向性

評価

新しい issue をメールで受け取る