plotly / plotly/plotly.js

Overlaying x axis doesn't work correctly.

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

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

bug P3
主要言語
JavaScript
スター
18.3k
フォーク
2k
平均マージ
2日 12時間
マージ済み PR（30日）
28

説明

I was trying to create a plot, with 8 tracks divided in 2 subplots arranged in a grid, where 7 tracks share same x axis and one of them will have a different x axis. here is sample

var data = [{
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      0,
      26,
      408,
      24,
    ],
    type: "scatter",
    yaxis: "y",
    xaxis: "x",
    name: "Channel 1",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(76, 198, 233, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(76, 198, 233, 0.5)"
    },
    fillcolor: "rgba(76, 198, 233, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      518,
      1212,
      696,
      9,
    ],
    type: "scatter",
    yaxis: "y3",
    xaxis: "x",
    name: "Channel 2",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(239, 151, 191, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(239, 151, 191, 0.5)"
    },
    fillcolor: "rgba(239, 151, 191, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      174,
      203,
      38,
      48,
    ],
    type: "scatter",
    yaxis: "y5",
    xaxis: "x",
    name: "Channel 3",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(245, 150, 50, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(245, 150, 50, 0.5)"
    },
    fillcolor: "rgba(245, 150, 50, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      737,
      307,
      0,
      96,
    ],
    type: "scatter",
    yaxis: "y7",
    xaxis: "x",
    name: "Channel 4",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(218, 227, 109, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(218, 227, 109, 0.5)"
    },
    fillcolor: "rgba(218, 227, 109, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      3,
      108,
      314,
      218,
    ],
    type: "scatter",
    yaxis: "y2",
    xaxis: "x2",
    name: "Channel 5",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(178, 74, 195, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(178, 74, 195, 0.5)"
    },
    fillcolor: "rgba(178, 74, 195, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      202,
      0,
      72,
      951,
    ],
    type: "scatter",
    yaxis: "y4",
    xaxis: "x",
    name: "Channel 6",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(74, 211, 203, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(74, 211, 203, 0.5)"
    },
    fillcolor: "rgba(74, 211, 203, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      98,
      303,
      1146,
      914,
    ],
    type: "scatter",
    yaxis: "y6",
    xaxis: "x",
    name: "Channel 7",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(106, 155, 188, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(106, 155, 188, 0.5)"
    },
    fillcolor: "rgba(106, 155, 188, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  },
  {
    x: [
      0,
      90,
      180,
      270,
    ],
    y: [
      976,
      455,
      0,
      440,
    ],
    type: "scatter",
    yaxis: "y8",
    xaxis: "x",
    name: "Channel 8",
    showlegend: true,
    visible: true,
    marker: {
      color: "rgba(190, 235, 185, 0.5)"
    },
    line: {
      width: 2,
      color: "rgba(190, 235, 185, 0.5)"
    },
    fillcolor: "rgba(190, 235, 185, 0.25)",
    mode: "lines",
    hoverinfo: "none"
  }
];

var layout = {
  xaxis: {
    domain: [0.05, 0.95],
    zeroline: false,
    tickfont: {
      color: "rgba(255, 255, 255, 1)"
    },
    tickcolor: "rgba(255, 255, 255, 1)",
    linecolor: "rgba(255, 255, 255, 1)",
    gridcolor: "rgba(255, 255, 255, 0.12)",
    visible: true,
    anchor: "y2",
    title: {
      text: "X axis label",
      font: {
        color: "rgba(255, 255, 255, 1)"
      }
    },
    type: "linear"
  },
  paper_bgcolor: "rgba(46, 46, 46, 1)",
  plot_bgcolor: "rgba(46, 46, 46, 1)",
  legend: {
    font: {
      color: "rgba(255, 255, 255, 1)"
    }
  },
  barmode: "overlay",
  yaxis: {
    title: {
      text: "Channel 1 [unit 1]",
      font: {
        color: "rgba(76, 198, 233, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(76, 198, 233, 1)"
    },
    tickcolor: "rgba(76, 198, 233, 1)",
    linecolor: "rgba(76, 198, 233, 1)",
    side: "left",
    anchor: "x",
    showspikes: false,
    fixedrange: false,
    domain: [0.55, 1],
    type: "linear"
  },
  yaxis3: {
    title: {
      text: "Channel 2 [unit 2]",
      font: {
        color: "rgba(239, 151, 191, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(239, 151, 191, 1)"
    },
    tickcolor: "rgba(239, 151, 191, 1)",
    linecolor: "rgba(239, 151, 191, 1)",
    side: "right",
    anchor: "x",
    showspikes: false,
    fixedrange: false,
    overlaying: "y",
    domain: [0.55, 1],
    type: "linear",
  },
  yaxis5: {
    title: {
      text: "Channel 3",
      font: {
        color: "rgba(245, 150, 50, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(245, 150, 50, 1)"
    },
    tickcolor: "rgba(245, 150, 50, 1)",
    linecolor: "rgba(245, 150, 50, 1)",
    side: "left",
    anchor: "free",
    showspikes: false,
    fixedrange: false,
    overlaying: "y",
    position: 0,
    domain: [0.55, 1],
    type: "linear",
  },
  yaxis7: {
    title: {
      text: "Channel 4 [unit 4]",
      font: {
        color: "rgba(218, 227, 109, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(218, 227, 109, 1)"
    },
    tickcolor: "rgba(218, 227, 109, 1)",
    linecolor: "rgba(218, 227, 109, 1)",
    side: "right",
    anchor: "free",
    showspikes: false,
    fixedrange: false,
    overlaying: "y",
    position: 1,
    domain: [0.55, 1],
    type: "linear",        
  },
  yaxis2: {
    title: {
      text: "Channel 5 [unit 5]",
      font: {
        color: "rgba(178, 74, 195, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(178, 74, 195, 1)"
    },
    tickcolor: "rgba(178, 74, 195, 1)",
    linecolor: "rgba(178, 74, 195, 1)",
    side: "left",
    anchor: "x",
    showspikes: false,
    fixedrange: false,
    domain: [0.05, 0.5],
    type: "linear",
  },
  yaxis4: {
    title: {
      text: "Channel 6",
      font: {
        color: "rgba(74, 211, 203, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(74, 211, 203, 1)"
    },
    tickcolor: "rgba(74, 211, 203, 1)",
    linecolor: "rgba(74, 211, 203, 1)",
    side: "right",
    anchor: "x",
    showspikes: false,
    fixedrange: false,
    overlaying: "y2",
    domain: [0.05, 0.5],
    type: "linear",
  },
  yaxis6: {
    title: {
      text: "Channel 7 [unit 7]",
      font: {
        color: "rgba(106, 155, 188, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(106, 155, 188, 1)"
    },
    tickcolor: "rgba(106, 155, 188, 1)",
    linecolor: "rgba(106, 155, 188, 1)",
    side: "left",
    anchor: "free",
    showspikes: false,
    fixedrange: false,
    overlaying: "y2",
    position: 0,
    domain: [0.05, 0.5],
    type: "linear",
  },
  yaxis8: {
    title: {
      text: "Channel 8 [unit 8]",
      font: {
        color: "rgba(190, 235, 185, 1)"
      }
    },
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(190, 235, 185, 1)"
    },
    tickcolor: "rgba(190, 235, 185, 1)",
    linecolor: "rgba(190, 235, 185, 1)",
    side: "right",
    anchor: "free",
    showspikes: false,
    fixedrange: false,
    overlaying: "y2",
    position: 1,
    domain: [0.05, 0.5],
    type: "linear"
  },
  grid: {
    columns: 1,
    rows: 2
  },
  xaxis2: {
    showgrid: false,
    zeroline: false,
    automargin: true,
    tickfont: {
      color: "rgba(178, 74, 195, 1)"
    },
    gridcolor: "rgba(255, 255, 255, 0.12)",
    tickcolor: "rgba(178, 74, 195, 1)",
    linecolor: "rgba(178, 74, 195, 1)",
    anchor: "free",
    position: 0,
    scaleanchor: "x",
    type: "linear",
    domain: [0.05, 0.95],
    overlaying: 'x'
  },
  showlegend: false
};

Plotly.newPlot("myDiv", data, layout, {
  responsive: true
});

I am unable to figure out why track with name "Channel 5" is hiding other tracks behind it, while xaxis2.overlaying is set to 'x' and yaxis6.overlaying = yaxis4.overlaying = yaxis8.overlaying = 'y2'.

here is screen shot.
Image

and code pen https://codepen.io/goyaltushar92/pen/ZYzbjZr

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

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

はじめの一歩

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

調査の方向性

リンクされた CodePen の例と Plotly.newPlot の呼び出しを再現することから始め、Channel 5 と xaxis2.overlaying がグリッドとどのように相互作用するかに焦点を当てます。レンダリングされたトラックを指定された layout と比較し、その後、Channel 5 が他のトラックを隠す原因を特定できるまで overlay の動作を追跡します。完了条件は、意図した重ね合わせ軸を維持しながら、reproducer がすべてのトラックを保持することです。

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

評価

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

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

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