问题描述
下面的MWE过分简化了我的真正目标。但是，我有一个需要很长时间才能绘制的背景图像（在下面的示例中，它只是一个32 mtcars数据集值的散点图）。用户可以从我的背景图像中单击某些点，这将导致绘制新点。我的目标是在顶层重新绘制这些新点，而不需要重绘背景图像散点图以节省时间和计算。
The MWE below oversimplifies my real goal. However, I have a background image that takes a long time to draw (in the example below it is simply a scatterplot of 32 mtcars dataset values). Users can click on certain points from my background image, and this will cause new points to be plotted. My aim is for these new points to simply be redrawn on the top layer, while the background image scatterplot does not need to be redrawn to save time and computation.
我的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个黑色数据点中的任何一个，你应该会看到它周围画出的四个彩色点。但是，我离开了挣扎着几个问题：
When a user clicks on any of the 32 black points, four colored red points are drawn around the clicked black point. This is mostly working, and if you click on any of the 32 black data points, you should see the four colored points drawn around it. However, I am left struggling with a few questions:
1）我如何改进这一点，以便四个彩色点不通过线连接？
1) How can I improve this so that the four colored points are not connected by lines?
2）如何使大小和fillColor实际工作？当我改变它们的值时，我看不到它们有效。
2) How can I make the size and fillColor actually work? When I change their values, I do not see them have an effect.
3）这是一个合理的语法，使交互性和绘图尽可能快吗？我很确定背景图像没有以有效的方式重绘，但很想听到它的确认，因为我是这个语法的新手。如果我是在顶层添加100个新点，这仍然有效吗？如果没有，我会很高兴听到一个建议改进语法的建议。
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.
谢谢。
推荐答案
将模式：'markers'添加到跟踪对象
值必须在 marker object和 fillColor 需要 color 。
The values need to be inside the marker object and fillColor needs to be color.
marker:
{
color: 'red',
size: 20
}
这有点意见为基础。问题是你使用ggplot来创建模板，这会创建一个非常复杂的情节。 100点后，每次点击后都会有一些延迟。
That's a bit opinion based. The problem is that you use ggplot to create the template which creates quite a complicated plot. With 100 points you get quite some delay after each click.
修正x / y轴范围会稍微改善绘图，因为如果新值超出旧值范围，图表需要调整大小。
Fixing the x/y-axis ranges will improve the drawing a bit because the graph does the need to be resized if the new values are outside the range of the old ones.
gP %>%
layout(
xaxis = list(range = c(8, 35)),
yaxis = list(range = c(3, 9))
)
如果您可以在不使用ggplotly的情况下绘制绘图，则只能创建一次跟踪，然后通过 extendTraces 附加值。
If you can draw the plot without using ggplotly you could create the trace only once and then append the values via extendTraces.
但我认为它是最好的，最后它是一个基于浏览器的库，而不是一个独立的程序。
But I think it is as good as it can get, at the end it is a browser based library and not a standalone program.
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);
}
)}
")
这篇关于交互式地添加点到情节R而不重绘背景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！