這是以前的帖子(Interactively adding points to plotly R without redrawing background plot)的延續。我正在製作32 mtcars數據集值的散點圖矩陣(使用R包ggpairs)。我的目標是讓用戶點擊任何子圖上的一個點。這會在原始數據框中產生一個隨機子集(大小可以變化,但在下面的示例中爲2),以覆蓋所有散點圖子圖(散點圖的數量可能會有所不同,但在下面的示例中爲3)。在繪製R時交互地將子圖添加到子圖中,而無需重繪背景圖
我半工作MWE如下 -
library(plotly)
library(htmlwidgets)
library(GGally)
dat <- mtcars[,c(3,4,7)]
dat[,3] = dat[,3]*8
p <- ggpairs(dat)
myMax = max(abs(dat))
myMin = min(abs(dat))
myRange = c(myMax, myMin)
p2 <- p
for(x in 2:p$nrow) {
for(y in 1:(x-1)) {
p2[x,y] <- p[x,y] +
coord_cartesian(xlim = c(myRange), ylim = c(myRange))
}
}
p3 <- ggplotly(p2)
p3 %>% onRender("function(el, x, data) {
// Number of rows in data frame is myLength=3
myLength = Math.sqrt(document.getElementsByClassName('cartesianlayer')[0].childNodes.length);
// AxisNames stores the names of the 3 rows ('disp','hp','qsec')
AxisNames = [];
for (i = 1; i < (myLength+1); i++) {
AxisNames.push(document.getElementsByClassName('infolayer')[0].childNodes[i].textContent);
}
el.on('plotly_click', function(e) {
// Grab two random rows of the 32 rows from mtcars dataset and store in myData. In my real code (not this MWE), myData represents an array of 1 or more objects, where each object contains values for each column in the dataset.
data1 = data[Math.floor(Math.random() * 32) + 1];
data2 = data[Math.floor(Math.random() * 32) + 1];
var myData = [data1, data2];
//May not be necessary, but this creates one array allData that contains all column values for all randomly selected rows. Since this example has 3 columns (disp, hp, and qsec) and two randomly selected rows, allData has a length of 6.
var allData = [];
for (i = 0; i < myData.length; i++){
for (j = 0 ; j < myLength; j++){
allData.push(myData[i][AxisNames[j]])
}
}
console.log(allData)
//This correctly plots the disp on the x-axis and qsec on the y-axis of both randomly selected data frame rows and plots it into the correct scatterplot (bottom left one that has x-axis of disp and y-axis of qsec). This needs to be automated, so that the corresponding x and y values for the 2 randomly selected data frame rows are also plotted on all other scatterplot matrices.
var trace1 = {
x: [allData[0], allData[3]],
y: [allData[2], allData[5]],
mode: 'markers',
marker: {
color: 'green',
size: 20
}
};
Plotly.addTraces(el.id, trace1);
}
)}", data = dat)
什麼目前發生的是隨機選擇的行僅在底部的一個次要情節繪製(綠色)左(而不是在所有三個散點圖)。我正在困難地訪問和繪製左下角旁邊的任何其他散點圖。
我可以在方法正在與長得多的數據幀(在數千行觀察的順序)和更寬的數據幀(三個以上的列,使三個以上的散點圖要繪製)。所以,我試圖找到一個有效的方法來實現這個目標,以便點不需要太長的時間來繪製。我相信(從閱讀)每個Plotly.addTraces()可以減慢繪圖時間。如果數據框有6列,那麼會有15個散點圖,如果每個散點圖都有自己的addTraces(),那麼會有15個addTraces()。我想知道這是否會導致點太慢?如果是這樣,我會非常渴望聽到如何最有效地實現這一目標的建議(允許在所有散點圖上儘可能快地繪製綠點)。
我將非常感謝任何幫助或想法!
編輯:
感謝來自尼斯的投入,我能夠使其不必硬編碼軸標籤和變量在每個插曲被用來更新這個腳本。更新MWE低於:
library(plotly)
library(htmlwidgets)
library(GGally)
dat <- mtcars[,c(3,4,7)]
dat[,3] = dat[,3]*8
p <- ggpairs(dat)
myMax = max(abs(dat))
myMin = min(abs(dat))
myRange = c(myMax, myMin)
p2 <- p
for(x in 2:p$nrow) {
for(y in 1:(x-1)) {
p2[x,y] <- p[x,y] +
coord_cartesian(xlim = c(myRange), ylim = c(myRange))
}
}
p3 <- ggplotly(p2)
p3 %>% onRender("function(el, x, data) {
len = Math.sqrt(document.getElementsByClassName('cartesianlayer')[0].childNodes.length);
// AxisNames stores the names of the 3 rows ('disp','hp','qsec')
AxisNames = [];
for (i = 1; i < (len+1); i++) {
AxisNames.push(document.getElementsByClassName('infolayer')[0].childNodes[i].textContent);
}
el.on('plotly_click', function(e) {
data1 = data[Math.floor(Math.random() * 32) + 1];
data2 = data[Math.floor(Math.random() * 32) + 1];
var myData = [data1, data2];
console.log(myData);
var Traces = [];
var i=0;
var k=1;
while ((i*len+k)<=Math.pow((len-1),2)) {
var xArr = [];
for (a=0; a<myData.length; a++){
xArr.push(myData[a][AxisNames[i]])
}
while ((i+k)<len){
var yArr = [];
for (a=0; a<myData.length; a++){
yArr.push(myData[a][AxisNames[(len-k)]])
}
var trace = {
x: xArr,
y: yArr,
mode: 'markers',
marker: {
color: 'green',
size: 20
},
xaxis: 'x' + (i+1),
yaxis: 'y' + (i*len+k)
};
Traces.push(trace);
k++;
}
i++;
k=1;
}
Plotly.addTraces(el.id, Traces);
}
)}", data = dat)