如何強制使用Box Select工具以圖表的形式顯示？

我下面這個例子中plotly選擇感興趣的區域：如何強制使用Box Select工具以圖表的形式顯示？

<head> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 
<body> 
    <div id="graph"></div> 
</body> 

<script> 
var gd = document.getElementById('graph'); 
var d3 = Plotly.d3; 
var formatter = d3.format('.2f'); 

Plotly.plot(gd, [{ 
    mode: 'lines', 
    x: Array.apply(null, Array(100)).map(() => Math.random()), 
    y: Array.apply(null, Array(100)).map(() => Math.random()), 
}], { 
    dragmode: 'select' 
}); 

gd.on('plotly_selected', (eventData) => { 
    var xRange = eventData.range.x; 
    var yRange = eventData.range.y; 

    Plotly.relayout('graph', 'title', 
`x range: [${xRange.map(formatter).join(', ')}]<br> 
y range: [${yRange.map(formatter).join(', ')}]` 
); 
}); 
</script>

然而，當我改變模式值是「行」，而不是「標誌」，包裝盒選擇按鈕不存在於繪圖中（通常應該在平移按鈕旁邊）。只要頁面呈現，我仍然可以選擇框選，但如果選擇縮放工具，則無法返回框選。

來源

2017-05-19 Jon

對我有何意見？ –

嗨，喬恩，你看我的答案嗎？ –

我發現了一個可以明確地指定哪個按鈕應該存在：

Plotly.plot(gd, 
      [ 
       { 
        type: "scatter", 
        x: time, 
        y: current, 
       } 
      ], 
      {}, 
      {modeBarButtons: 
      [ 
       ['zoom2d'], 
       ['zoomIn2d'], 
       ['zoomOut2d'], 
       ['autoScale2d'], 
       ['select2d'], 
       ['toImage'] 
      ] 
      } 
      );

這似乎是迫使這些按鈕，無論情節類型的出現。

來源

2017-06-13 17:55:21 Jon

我認爲這是通過設計，因爲你只能真正選擇標記，所以如果沒有，就沒有選擇。沒有什麼是從在同一時間使用這兩種然而，修改代碼停止你是這個樣子：

xvals = Array.apply(null, Array(100)).map(() => Math.random()); 
yvals = Array.apply(null, Array(100)).map(() => Math.random()); 
Plotly.plot(gd, [{ 
    mode: 'lines', 
    x: xvals, 
    y: yvals, 
},{ 
    mode: 'markers', 
    x: xvals, 
    y: yvals, 
}], { 
    dragmode: 'select' 
});

如果您需要的標記是無形的，你可以調整它們的大小比線寬小並使markers和lines具有相同的顏色。

來源

2017-05-21 14:24:23

如何強制使用Box Select工具以圖表的形式顯示？

回答

相關問題