plotly / plotly/plotly.R

Highlight of trace adds duplicate legend item.

オープン
#2,417 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
R
スター
2.7k
フォーク
641
PR マージ指標
30日以内にマージされた PR はありません

説明

The current implementation for a selection highlighting adds duplicate legend entries.

For example in the below screenshot I clicked on trace "Alpha" and a new legend item "Alpha" got added while the existing "Alpha" legend is now dimmed but is still present. Resulting in 2 "Alpha" entries.

Image

The core problem is that the current javascript code handling crosstalk selection, simply adds a duplicate selection traces here and dims all other traces here.
Since the original 'Alpha' trace was not removed and only dimmed and since a new trace also named "Alpha" was added to the legend. It results in the above legend.

Would it be possible to update the javascript logic to just dim the non-selected traces and update the selected trace to the desired highlight color (and other aspects set by the user). This would the have the desired effect on the legend.
Or to set the selected trace with showLegend=FALSE in the restyle for all the traces that got highlighted?

Edit it is not so easy as first thought:

I guess where my above described solution fails is when the selection is only a subset the trace data and only partially covers it. In that case the original legend entry would still need to be visible.
However, in theory it is possible to detect at creation time of the plot if the crosstalk key selection is equal to the legend entries. Eg. if the crosstalk key and the aesthetic property for the legend are equal.
That said this detection would then fail if one constructs a plotly object by manually adding traces. Or if the plotly graph has other traces added from a different dataset.

So to achieve what we want, we somehow need to determine if selection data fully covers the trace data. Not sure how we could smartly do it without having and extreme impact on the performance.

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

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

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

inst/htmlwidgets/plotly.js の 733 行目と 815 行目付近にある crosstalk の選択ロジックから始めます。重複した「Alpha」の凡例エントリを再現し、選択された trace と選択されていない trace がどのように追加または暗くされるかを、issue で説明されている部分選択のケースも含めて追跡します。選択範囲が trace の一部だけを覆う場合に、ハイライトによって凡例エントリが重複せず、元の凡例が維持されれば完了です。

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

評価

技術スタック
javascript, r
領域
data-visualization, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
25/100

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

初心者向けの GitHub issue を短くまとめたダイジェスト。