时间戳

首页 > 解决方案 > 让 div 出现在点击 R 中

javascript - 让 div 出现在点击 R 中

问题描述

我对将 Javascript 与 R 相结合的世界很陌生，而且我的 Javascript 知识非常有限。我正在尝试plotly绘制国际象棋开局图，当您单击开局时，它会显示一个带有开局初始移动的棋盘。

library(plotly)
library(htmlwidgets)
library(data.table)
library(rchess)

data("chessopenings")
setDT(chessopenings)
mychess = chessopenings[1:10]
mychess[, Pop := sample(c(1,2,4), nrow(mychess), replace = T)]
mychess[, fens := sapply(pgn, function(x) {chsspgn <- Chess$new(); chsspgn$load_pgn(x); chsspgn$fen()})]

上面的代码只是创建了一个包含 10 个开口的样本数据集。然后，我根据我在此处找到的指导使用 plotly 绘制那些https://plotly-r.com/supplying-custom-data.html#fig:hover-annotate我尝试创建一个新函数，当你显示棋盘时点击点。棋盘函数是此处指定的函数https://chessboardjs.com/examples#1002如果我理解正确（如果我错了请纠正我）它会返回一个“div”元素，这是我必须展示的元素。

q = plot_ly(mychess, x = ~eco, y = ~Pop) %>% 
  add_markers(text = ~name,
              customdata = ~fens)  
    
onRender(
  q, "
     function(el) {
      el.on('plotly_click', function(d) {
      var pt = d.points[0]; 
      var fen =  d.points[0].customdata
      var newboard = Chessboard('myBoard', fen);
      newboard.style.visibility = 'visible';
      newboard.style.display = 'block';
      })}")

不幸的是，什么都没有显示。我使用了此处提供的信息Show/hide 'div' using JavaScript但似乎我遗漏了一些东西。

更新：我尝试了@Bas 的建议，使用以下代码转换图像：

png(pic1 <- tempfile(fileext = ".png"));chessboardjs(fen = mychess$fens[1]); dev.off() 
text = knitr::image_uri(pic1) 
text = sub(".*?,", "", text) 
html <- sprintf('<html><body><img src="data:image/png;base64,%s"></body></html>', text) 
cat(html, file = tf2 <- tempfile(fileext = ".html")) 
browseURL(tf2)

但这也不起作用。

标签： javascriptrplotlyr-plotly

解决方案

如果您应用如下Plotly.relayout(...)功能，它会起作用。请注意，我用一些自定义数据替换了图像，因为我没有该Chessboard(...)功能。

htmlwidgets::onRender(
  q, "
  function(el) {
      el.on('plotly_click', function(d) {
      var pt = d.points[0]; 
      var fen =  d.points[0].customdata
      var img = {
            // location of image
            source: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",
            // top-left corner
            x: 0,
            y: 1,
            sizex: 0.2,
            sizey: 0.2,
            xref: 'paper',
            yref: 'paper'
          };
      Plotly.relayout(el.id, {
               images: [img] 
      });
      })}
      ")

推荐阅读