在不重绘背景图的情况下交互式地向 plotly R 添加点
Interactively adding points to plotly R without redrawing background plot
下面的 MWE 过于简化了我的真实目标。但是,我有一个背景图像需要很长时间才能绘制(在下面的示例中,它只是 32 个 mtcars 数据集值的散点图)。用户可以单击我的背景图像中的某些点,这将导致绘制新点。我的目标是让这些新的点在顶层简单的重新绘制,而背景图像散点图不需要重新绘制以节省时间和计算。
我的MWE如下:
library(plotly)
library(htmlwidgets)
g <- ggplot(mtcars, aes(x=mpg, y=cyl)) + geom_point()
gP <- ggplotly(g)
gP %>% onRender("
function(el, x) {
myGraph = document.getElementById(el.id);
el.on('plotly_click', function(e) {
console.log(e)
console.log(e.points[0].x)
var trace1 = {
x: [e.points[0].x-.3, e.points[0].x-.3, e.points[0].x+.3, e.points[0].x+.3],
y: [e.points[0].y-.3, e.points[0].y+.3, e.points[0].y-.3, e.points[0].y+.3],
type: 'scatter',
fillColor : 'red',
size: 20
};
Plotly.addTraces(el.id, trace1);
})}
")
当用户单击 32 个黑点中的任何一个时,会在单击的黑点周围绘制四个彩色红点。这基本上是有效的,如果您单击 32 个黑色数据点中的任何一个,您应该会看到围绕它绘制的四个彩色点。但是,我还在为几个问题而苦苦挣扎:
1) 我怎样才能改进这个,使四个彩色点不被线连接?
2) 如何让 size 和 fillColor 真正起作用?当我更改它们的值时,我看不到它们有任何效果。
3) 这是使交互和绘图尽可能快的合理语法吗?我很确定背景图像没有以有效的方式重新绘制,但很想听到关于它的确认,因为我是这种语法的新手。如果我要在顶层添加 100 个新点,这仍然有效吗?如果没有,我将很高兴听到关于改进语法的建议。
谢谢。
1) How can I improve this so that the four colored points are not
connected by lines?
将 mode: 'markers'
添加到您的 trace
对象
2) How can I make the size and fillColor actually work? When I change
their values, I do not see them have an effect.
值需要在 marker
对象内并且 fillColor
需要是 color
.
marker:
{
color: 'red',
size: 20
}
3) Is this a reasonable syntax to make the interactivity and drawing as fast as possible? I am pretty sure the background image is
not being redrawn in an efficient manner but would love to hear
confirmation about it as I am new to this syntax. If I were to add
100s of new points on the top layer, would this still be efficient? If
not, I would be grateful to hear advice for recommendations for
improved syntax.
这有点基于意见。问题是您使用 ggplot 创建的模板创建了一个相当复杂的图。有了 100 分,每次点击后您都会有相当长的延迟。
固定 x/y-axis 范围会稍微改善绘图,因为如果新值超出旧值范围,则需要调整图形大小。
gP %>%
layout(
xaxis = list(range = c(8, 35)),
yaxis = list(range = c(3, 9))
)
如果您可以在不使用 ggplotly 的情况下绘制绘图,您可以只创建一次跟踪,然后通过 extendTraces
.
附加值
但我认为它已经很好了,最终它是一个基于浏览器的库,而不是一个独立的程序。
library(plotly)
library(htmlwidgets)
g <- ggplot(mtcars, aes(x=mpg, y=cyl)) + geom_point()
gP <- ggplotly(g)
gP %>%
layout(
xaxis = list(range = c(8, 35)),
yaxis = list(range = c(3, 9))
)
gP %>% onRender("
function(el, x) {
myGraph = document.getElementById(el.id);
el.on('plotly_click', function(e)
{
var trace1 = {
x: [],
y: [],
mode: 'markers',
marker: {
color: 'red',
size: 20
}
};
for (var i = 0; i < 100; i+= 1){
trace1.x.push(e.points[0].x + Math.random() - 0.5)
trace1.y.push(e.points[0].y + Math.random() - 0.5)
}
Plotly.addTraces(el.id, trace1);
}
)}
")
下面的 MWE 过于简化了我的真实目标。但是,我有一个背景图像需要很长时间才能绘制(在下面的示例中,它只是 32 个 mtcars 数据集值的散点图)。用户可以单击我的背景图像中的某些点,这将导致绘制新点。我的目标是让这些新的点在顶层简单的重新绘制,而背景图像散点图不需要重新绘制以节省时间和计算。
我的MWE如下:
library(plotly)
library(htmlwidgets)
g <- ggplot(mtcars, aes(x=mpg, y=cyl)) + geom_point()
gP <- ggplotly(g)
gP %>% onRender("
function(el, x) {
myGraph = document.getElementById(el.id);
el.on('plotly_click', function(e) {
console.log(e)
console.log(e.points[0].x)
var trace1 = {
x: [e.points[0].x-.3, e.points[0].x-.3, e.points[0].x+.3, e.points[0].x+.3],
y: [e.points[0].y-.3, e.points[0].y+.3, e.points[0].y-.3, e.points[0].y+.3],
type: 'scatter',
fillColor : 'red',
size: 20
};
Plotly.addTraces(el.id, trace1);
})}
")
当用户单击 32 个黑点中的任何一个时,会在单击的黑点周围绘制四个彩色红点。这基本上是有效的,如果您单击 32 个黑色数据点中的任何一个,您应该会看到围绕它绘制的四个彩色点。但是,我还在为几个问题而苦苦挣扎:
1) 我怎样才能改进这个,使四个彩色点不被线连接?
2) 如何让 size 和 fillColor 真正起作用?当我更改它们的值时,我看不到它们有任何效果。
3) 这是使交互和绘图尽可能快的合理语法吗?我很确定背景图像没有以有效的方式重新绘制,但很想听到关于它的确认,因为我是这种语法的新手。如果我要在顶层添加 100 个新点,这仍然有效吗?如果没有,我将很高兴听到关于改进语法的建议。
谢谢。
1) How can I improve this so that the four colored points are not connected by lines?
将 mode: 'markers'
添加到您的 trace
对象
2) How can I make the size and fillColor actually work? When I change their values, I do not see them have an effect.
值需要在 marker
对象内并且 fillColor
需要是 color
.
marker:
{
color: 'red',
size: 20
}
3) Is this a reasonable syntax to make the interactivity and drawing as fast as possible? I am pretty sure the background image is not being redrawn in an efficient manner but would love to hear confirmation about it as I am new to this syntax. If I were to add 100s of new points on the top layer, would this still be efficient? If not, I would be grateful to hear advice for recommendations for improved syntax.
这有点基于意见。问题是您使用 ggplot 创建的模板创建了一个相当复杂的图。有了 100 分,每次点击后您都会有相当长的延迟。
固定 x/y-axis 范围会稍微改善绘图,因为如果新值超出旧值范围,则需要调整图形大小。
gP %>%
layout(
xaxis = list(range = c(8, 35)),
yaxis = list(range = c(3, 9))
)
如果您可以在不使用 ggplotly 的情况下绘制绘图,您可以只创建一次跟踪,然后通过 extendTraces
.
但我认为它已经很好了,最终它是一个基于浏览器的库,而不是一个独立的程序。
library(plotly)
library(htmlwidgets)
g <- ggplot(mtcars, aes(x=mpg, y=cyl)) + geom_point()
gP <- ggplotly(g)
gP %>%
layout(
xaxis = list(range = c(8, 35)),
yaxis = list(range = c(3, 9))
)
gP %>% onRender("
function(el, x) {
myGraph = document.getElementById(el.id);
el.on('plotly_click', function(e)
{
var trace1 = {
x: [],
y: [],
mode: 'markers',
marker: {
color: 'red',
size: 20
}
};
for (var i = 0; i < 100; i+= 1){
trace1.x.push(e.points[0].x + Math.random() - 0.5)
trace1.y.push(e.points[0].y + Math.random() - 0.5)
}
Plotly.addTraces(el.id, trace1);
}
)}
")