我试图复制this个简单的绘图,显示数据点悬停上的图像.代码是here.

然而,我无法复制它.这就是我目前的情况:

library(htmlwidgets)
library(magrittr)
library(plotly)

js <- "
function(el) {
    var tooltip = Plotly.d3.select('#' + el.id + ' .svg-container')
      .append(\"div\")
      .attr(\"class\", \"my-custom-tooltip\");
  
    el.on('plotly_hover', function(d) {
      var pt = d.points[0];
      // Choose a location (on the data scale) to place the image
      // Here I'm picking the top-left corner of the graph
      var x = pt.xaxis.range[0];
      var y = pt.yaxis.range[1];
      // Transform the data scale to the pixel scale
      var xPixel = pt.xaxis.l2p(x) + pt.xaxis._offset;
      var yPixel = pt.yaxis.l2p(y) + pt.yaxis._offset;
      // Insert the base64 encoded image
      var img = \"<img src='\" +  pt.customdata + \"' width=100>\";
      tooltip.html(img)
        .style(\"position\", \"absolute\")
        .style(\"left\", xPixel + \"px\")
        .style(\"top\", yPixel + \"px\");
      // Fade in the image
      tooltip.transition()
        .duration(300)
        .style(\"opacity\", 1);
    });
  
    el.on('plotly_unhover', function(d) {
      // Fade out the image
      tooltip.transition()
        .duration(500)
        .style(\"opacity\", 0);
    });
};
"

x <- 1:3 
y <- 1:3

artists <- c("Bethoven", "Mozart", "Bach")

image_links <- c(
  "https://upload.wikimedia.org/wikipedia/commons/6/6f/Beethoven.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/47/Croce-Mozart-Detail.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg"
)

# hoverinfo = "none" will hide the plotly.js tooltip, but the 
# plotly_hover event will still fire
plot_ly(hoverinfo = "none") %>%
  add_text(x = x, y = y, customdata = image_links, text = artists) %>%
  htmlwidgets::onRender(js)

悬停时不会发生任何事情,控制台将抛出以下错误:

htmlwidgets.js:261 Uncaught SyntaxError: Unexpected token ';'
    at tryEval (htmlwidgets.js:252:32)
    at htmlwidgets.js:236:24
    at Array.forEach (<anonymous>)
    at forEach (htmlwidgets.js:55:14)
    at evalAndRun (htmlwidgets.js:230:7)
    at htmlwidgets.js:654:11
    at Array.forEach (<anonymous>)
    at forEach (htmlwidgets.js:55:14)
    at htmlwidgets.js:576:7
    at Array.forEach (<anonymous>)

我做错了什么?

此外,在悬停状态下显示图像时,是否可以显示工具提示(如text中定义的)?

推荐答案

plotly的2.0版本.js将d3作为Bundle 依赖项删除,因此您现在需要将其单独引入:

library(htmlwidgets)
library(magrittr)
library(plotly)

x <- 1:3 
y <- 1:3

artists <- c("Bethoven", "Mozart", "Bach")

image_links <- c(
  "https://upload.wikimedia.org/wikipedia/commons/6/6f/Beethoven.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/47/Croce-Mozart-Detail.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg"
)

d3 <- htmltools::htmlDependency(
  "d3", "7.3",
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/"),
  script = "d3.min.js"
)

# hoverinfo = "none" will hide the plotly.js tooltip, but the 
# plotly_hover event will still fire
p <- plot_ly(hoverinfo = "none") %>%
  add_text(x = x, y = y, customdata = image_links, text = artists) %>%
  htmlwidgets::onRender(readLines("hover_tooltip.js"))

p$dependencies <- c(p$dependencies, list(d3))
p

然后你需要在JavaScript中将Plotly.d3改为d3:

// hover_tooltip.js
function(el) {
    var tooltip = d3.select('#' + el.id + ' .svg-container')
      .append("div")
      .attr("class", "my-custom-tooltip");

    el.on('plotly_hover', function(d) {
      var pt = d.points[0];
      // Choose a location (on the data scale) to place the image
      // Here I'm picking the top-left corner of the graph
      var x = pt.xaxis.range[0];
      var y = pt.yaxis.range[1];
      // Transform the data scale to the pixel scale
      var xPixel = pt.xaxis.l2p(x) + pt.xaxis._offset;
      var yPixel = pt.yaxis.l2p(y) + pt.yaxis._offset;
      // Insert the base64 encoded image
      var img = "<img src='" +  pt.customdata + "' width=100>";
      tooltip.html(img)
        .style("position", "absolute")
        .style("left", xPixel + "px")
        .style("top", yPixel + "px");
      // Fade in the image
      tooltip.transition()
        .duration(300)
        .style("opacity", 1);
    });

    el.on('plotly_unhover', function(d) {
      // Fade out the image
      tooltip.transition()
        .duration(500)
        .style("opacity", 0);
    });
}

Javascript相关问答推荐

单击树元素时阻止焦点事件触发?

reaction useEffect KeyDown for each 条目配音输出

如何修复循环HTML元素附加函数中的问题?

D3多线图显示1线而不是3线

如何最好地从TypScript中的enum获取值

使用axios.获取实时服务器时的404响应

网页自检测外部元素无法加载

React Code不在装载上渲染数据,但在渲染上工作

浮动Div的淡出模糊效果

如何修复我的js构建表每当我添加一个额外的列作为它的第一列?

配置WebAssembly/Emscripten本地生成问题

将本机导航路由react 到导航栏中未列出的屏幕?

手机上的渲染错误文本必须在文本组件中渲染,但在浏览器上没有问题<><>

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

如何将多维数组插入到另一个多维数组中?

如何将zoom 变换应用到我的d3力有向图?

如何在HTMX提示符中设置默认值?

删除元素属性或样式属性的首选方法

自动滚动功能在当前图像左侧显示上一张图像的一部分

TypeORM QueryBuilder限制联接到一条记录