1

I am aiming to make a plot using the onRender() function from the htmlwidgets package in which a user can click on a point and a gray line is drawn. I am trying to make the thickness of the gray line set to a variable.

I have a tentative MWE working as shown below. However, I currently have a problem. Basically, the width of the line changes depending on the resizing of the image and/or browser. This creates a problem because some of the dots change from being inside or outside the gray line depending on the changing line width (as a result of the image or browser resizing). However, whether the dots are inside or outside the gray line has a meaning that I need to keep consistent.

As a result, I am trying to designate the thickness of the line as a value that is relative to the x and y axis values (and not to the pixel values on the screen that can change size). I am hoping this would create a consistent gray line width that does not change relative to the dots even if the user resized the image or browser. Is this something can be accomplished in the onRender() function?

library(plotly)
library(broom)
library(htmlwidgets)

dat <- mtcars
dat$mpg <- dat$mpg * 10
maxVal = max(abs(dat))
maxRange = c(-1*maxVal, maxVal)

# Specify line width
ciVal = 100

p <- ggplot(data = dat, aes(x=disp,y=mpg)) + geom_point(size=0.5) + coord_cartesian(xlim = c(maxRange[1], maxRange[2]), ylim = c(maxRange[1], maxRange[2]))

ggplotly(p) %>%
  onRender("
           function(el, x, data) {
            el.on('plotly_click', function(e) {

              var trace1 = {
                 x: [0, 600],
                 y: [0, 600],
                 mode: 'lines',
                 line: {
                   color: 'gray',
                   width: 2*data.ciVal
                 },
                 opacity: 0.5
              }

              Plotly.addTraces(el.id, trace1);
           })
          }
          ", data = list(dat=dat, ciVal=ciVal))

Note: This question is an additional tweak to a previous question I asked (Changing line thickness and opacity in scatterplot on onRender() htmlWidgets in R).

4

1 回答 1

1

您可以使用两条线来标记边界并填充它们之间的空间，而不是使用一条具有不同宽度的线 ( fill: 'tonexty')。因此，这条线将始终根据您的轴范围和缩放来调整大小。

正常变焦 放大

library(plotly)
library(htmlwidgets)

dat <- mtcars
dat$mpg <- dat$mpg * 10
maxVal = max(abs(dat))
maxRange = c(-1*maxVal, maxVal)

p <- ggplot(data = dat, aes(x=disp,y=mpg)) + geom_point(size=0.5) + coord_cartesian(xlim = c(maxRange[1], maxRange[2]), ylim = c(maxRange[1], maxRange[2]))

ggplotly(p) %>%
  onRender("
           function(el, x, data) {
           el.on('plotly_click', function(e) {

           var trace1 = {
             x: [0, 500],
             y: [450, 50],
             mode: 'lines',
             line: {
               color: 'gray',
               width: 2
             },
             opacity: 0.5
           }
           var trace2 = {
             x: [0, 500],
             y: [250, -150],
             mode: 'lines',
             fill: 'tonexty',
             line: {
               color: 'gray',
               width: 2
             },
             opacity: 0.5
           }
           Plotly.addTraces(el.id, trace1);
           Plotly.addTraces(el.id, trace2);

           })
           }
           ", data = list(dat=dat, ciVal=ciVal))
于 2017-03-05T22:10:13.267 回答