根據坐標值而不是像素設置標記大小，以R為單位

Question

不幸的是，該帖子- 設置標記大小 -並沒有幫助我尋找所需內容，並且是該主題中我唯一能找到的帖子。 根據散點圖的size參數上的繪圖文檔：

“大小（數字或大於或等於0的數字數組），默認值：6，設置標記大小（以px為單位）”

（以像素為單位）對我來說是個問題。 我想創建一個繪圖，其中標記的大小是基於坐標值而不是像素的，這樣我可以增加圖形的大小（例如，通過完全屏蔽），並且點的大小也要增加。 目前我的代碼示例：

library(plotly)
mydf <- data.frame(x = rep(1:20, times = 20), y = rep(1:20, each = 20),
                   thesize = 10)
plot_ly(mydf) %>%
  add_trace(x = ~x, y = ~y, type = 'scatter', mode = 'markers', 
            marker = list(symbol = 'hexagon', size = ~thesize, opacity = 0.6))

如果您在R中創建此圖，然后通過拖動Rstudio查看器窗口或以其他方式使圖變大或變小，您會注意到標記保持完全相同的大小（10像素），這令人沮喪。 如果我可以讓這些標記的直徑== 1（在x軸上）而不是設置為多個像素，我會很喜歡。 這可能嗎？

任何幫助都非常感謝！！！

Answer 1

讓我們從定義軸范圍的圖開始。

 p <- plot_ly() %>% layout(xaxis = list(range = c(1, 5)))

現在添加一個JavaScript事件監聽器，以捕獲繪圖布局中的任何更改

 javascript <- " var myPlot = document.getElementsByClassName('plotly')[0]; function resize(eventdata) { // magic happens here } myPlot.on('plotly_relayout', function(eventdata) { resize(eventdata); }); " p <- htmlwidgets::prependContent(p, onStaticRenderComplete(javascript)) p

事件傳遞事件eventdata從那里我們可以獲得新的軸范圍。
```
 eventdata['xaxis.range[1]'] 
```
由於我們事先不知道繪圖的大小，因此我們通過軸線的大小來確定
```
 var plot_width = Plotly.d3.select('.xlines-above').node().getBBox()['width']; 
```
我們需要手動調用一次該事件，以確保正確初始化繪圖

初始情節

放大

完整的R代碼

library("plotly")
library("htmlwidgets")

p <- plot_ly() %>%
  add_trace(x = c(1.5, 3, 4.2),
            y = c(-2, 1, 2), 
            type = 'scatter',
            mode = 'lines+markers',
            showlegend = F) %>% 
  add_trace(x = c(2, 3, 4.2),
            y = c(2, 0, -1),
            type = 'scatter',
            mode = 'lines+markers',
            showlegend = F) %>%
  add_trace(x = c(1.5, 3, 4.2),
            y = c(1, 0.5, 1),
            type = 'scatter',
            mode = 'markers',
            showlegend = F) %>% 
  layout(xaxis = list(range = c(1, 5)))
javascript <- "
marker_size = 0.5; // x-axis units
var myPlot = document.getElementsByClassName('plotly')[0];

function resize(eventdata) {
  var xaxis_stop = 5;
  var xaxis_start = 1;
  var plot_width = Plotly.d3.select('.xlines-above').node().getBBox()['width'];
  if (eventdata['xaxis.range[1]'] !== undefined) {
    var update = {'marker.size': marker_size * plot_width / (eventdata['xaxis.range[1]'] - eventdata['xaxis.range[0]'])};
  } else {
    var update = {'marker.size': marker_size * plot_width / (xaxis_stop - xaxis_start)};
  }
  Plotly.restyle(myPlot, update, 2);
}
resize({eventdata: {}});

myPlot.on('plotly_relayout', function(eventdata) {
  resize(eventdata);
});
"
p <- htmlwidgets::prependContent(p, 
                                 onStaticRenderComplete(javascript))
p

交互式JavaScript示例

您可以從圖形的定義的高度/寬度和定義的軸范圍開始，這樣您將知道一個軸單位有多少像素。
標記的大小最初將是您想要的大小。
每當用戶改變軸范圍，一個plotly_relayout事件將被觸發，並且可以從檢索新范圍eventdata在xaxis.range[1]開始）和xaxis.range[1]端部）
根據新范圍，您可以relayout標記大小。

 var plot_width = 500; var plot_height = 500; var margin_l = 100; var margin_r = 100; marker_size = 0.5; // x-axis units xaxis_start = 1; xaxis_stop = 5; var trace1 = { x: [1.5, 2, 3, 4], y: [10, 15, 13, 17], mode: "markers", marker: { size: marker_size * (plot_width - margin_l - margin_r) / (xaxis_stop - xaxis_start) }, showlegend: false }; var trace2 = { x: [2, 3, 4, 4.5], y: [16, 5, 11, 10], mode: "lines" }; var trace3 = { x: [1.5, 2, 3, 4], y: [12, 9, 15, 12], mode: "lines+markers", showlegend: false }; var data = [trace1, trace2, trace3]; var layout = { width: plot_width, height: plot_height, margin: { l: margin_l, r: margin_r }, xaxis: { range: [1, 5] }, showlegend: false }; Plotly.newPlot("myDiv", data, layout); var refplot = document.getElementById("myDiv"); refplot.on("plotly_relayout", function(eventdata) { if (eventdata["xaxis.range[1]"] !== undefined) { var update = { "marker.size": marker_size * (plot_width - margin_l - margin_r) / (eventdata["xaxis.range[1]"] - eventdata["xaxis.range[0]"]) }; } else { var update = { "marker.size": marker_size * (plot_width - margin_l - margin_r) / (xaxis_stop - xaxis_start) }; } Plotly.restyle("myDiv", update, 0); });

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

根據坐標值而不是像素設置標記大小，以R為單位

問題描述

1 個解決方案

解決方案1
2 已采納 2017-12-07 21:27:37

根據坐標值而不是像素設置標記大小，以R為單位

問題描述

1 個解決方案

解決方案1 2 已采納 2017-12-07 21:27:37

解決方案1
2 已采納 2017-12-07 21:27:37