0

我想在绘图图形的轴标题上有一个工具提示。

这是我的尝试：

x <- y <- 1:10
dat <- expand.grid(x=x, y=y)
dat <- transform(dat, z=x*y)

jscode <- '
$(document).ready(function(){
  setTimeout(function(){
    $($("#heatmap .g-xtitle text")[0]).attr("title", "hello").attr("data-toggle", "tooltip");
  }, 5000);
})
'

library(shiny)
library(plotly)
shinyApp(
  ui <- fluidPage(
    tags$head(tags$script(jscode)),
    plotlyOutput("heatmap")
  ),
  server = function(input, output){
    output$heatmap <- renderPlotly(plot_ly() %>%
      add_trace(data=dat, x=~x, y=~y, z=~z, type="heatmap") %>%
      layout(
        xaxis = list(title="foo") 
      )
    )
  }
)

JS代码按预期设置属性data-toggle和titlex轴标题的容器，但没有出现工具提示。我也在$($("#heatmap .g-xtitle text")[0]).tooltip()控制台中尝试过类似的东西，但没有任何反应。

4

2 回答 2

1

我认为您的代码存在几个问题：

  1. Plotly 不喜欢它的 SVG 代码编辑。即使您定位了正确的元素，Plotly 也可能会立即删除您添加的内容。
  2. 您错过了启用工具提示应用程序的代码。

当我想将工具提示放在刻度标签上时，我遇到了一个非常相似的问题。我花了很长时间才用自定义 CSS 和 JS 破解它。这个想法是添加一个 div（矩形），它可以完美地覆盖您想要使用工具提示丰富的元素。然后将该矩形的 CSS 设置opacity为 0 以隐藏它。但是，一旦您将其悬停，该矩形上的工具提示就会起作用（即使它是不可见的）。这是一个可视化矩形形状的代码。

x <- y <- 1:10
dat <- expand.grid(x = x, y = y)
dat <- transform(dat, z = x * y)

jscode <- "
$(document).ready(function() {
    // Enable tooltips app-wise
    $(\"[data-toggle='tooltip']\").tooltip({container: 'body'}); 
});
"

csscode <- HTML('
    .plot-container {
        position: relative;
    }
    .xaxis-container {
        height: 20px;
        position:absolute;
        bottom: 0;
        left: 40px;
        background: #bfb9b9;
        opacity: 0.3;
    }
    .xaxis-tooltip {
        width: 30px;
        height: 20px;
        background: #000;
        margin:auto;
    }
')

library(shiny)
library(plotly)
shinyApp(
    ui <- fluidPage(
        tags$head(
            tags$script(jscode),
            tags$style(csscode)
        ),
        div(class = 'plot-container',
            plotlyOutput("heatmap"),
            div(
                class = "xaxis-container",
                div(class = "xaxis-tooltip", "data-toggle" = "tooltip", "title" = "hello")
            )
        )
    ),
    server = function(input, output) {
        output$heatmap <- renderPlotly({
            plot_ly() %>%
                add_trace(
                    data = dat,
                    x =  ~ x,
                    y =  ~ y,
                    z =  ~ z,
                    type = "heatmap"
                ) %>%
                layout(xaxis = list(title = "foo")) %>%
                # We can't just center the rectangle relative to the entire plot area.
                # Instead, we need to do it relative to the draglayer.
                # This code sets proper width of .xaxis-container on app start.
                htmlwidgets::onRender(
                    "
                    function(el, x) {
                        var width = $('.draglayer')[0].getBoundingClientRect().width;
                        $('.xaxis-container').css('width', width);
                    }
                    "
                )
        })
    }
)

更改opacity: 0.3;为opacity: 0;第 21 行以获得功能齐全的解决方案。

于 2018-03-14T11:47:35.813 回答
0

注意：很遗憾，我还没有解决您的问题，但希望这些信息对您有所帮助。祝你好运！

背景：SVG

  1. plotly将绘图创建为Scalable Vector Graphics ( <svg>)

  2. 工具提示<svg>必须添加为名为的子元素<title>

  3. <title>应该是其父元素的第一个子元素

  4. <svg>需要在 SVG 命名空间中创建新元素

SVG 工具提示：矩形与绘图 x 轴

作为概念证明，我<svg>在您的示例中添加了一个矩形。然后，我使用 JS 添加了一个<title>元素作为该元素的第一个子<rect>元素，这会在矩形上生成一个工具提示。

svg 矩形工具提示

但是，对热图执行相同的步骤plotly不会在 x 轴标题上生成工具提示，尽管<title>元素已添加到 x 轴标题容器中。

svg 绘图工具提示

代码

library(shiny)
library(plotly)

x <- y <- 1:10
dat <- expand.grid(x=x, y=y)
dat <- transform(dat, z=x*y)

### Create a <svg> rectangle element
testRect <- '<svg width="250" height="75" xmlns="http://www.w3.org/2000/svg">
                <g class="test-rect">
                    <rect x="10" y="10" width="200" height="50" 
                        style="fill:wheat; stroke:blue; stroke-width:1px"/>
                </g>
            </svg>'

### Add a first child title element to the rectangle <svg>
### Hovering over the rectangle displays the tooltip
jscode_testRect <- '$(document).ready(function(){
    setTimeout(function(){
        var titleRect = document.createElementNS("http://www.w3.org/2000/svg", "title");
        titleRect.textContent = "rectangle tooltip";
        var testRect = document.getElementsByClassName("test-rect")[0];
        testRect.insertBefore(titleRect, testRect.childNodes[0]); 
    }, 500);
});'

### Add a first child title element to the SVG
### Hovering over the x-axis title doesn't display tooltip
jscode_xaxisPlotly <- '$(document).ready(function(){
    setTimeout(function(){
        var titleAxis = document.createElementNS("http://www.w3.org/2000/svg", "title");
        titleAxis.textContent = "x-axis tooltip";
        var gXtitle = document.getElementsByClassName("g-xtitle")[0];
        gXtitle.insertBefore(titleAxis, gXtitle.childNodes[0]); 
    }, 500);
});'

shinyApp(
    ui <- fluidPage(
        tags$head(tags$script(HTML(jscode_testRect))),
        tags$head(tags$script(HTML(jscode_xaxisPlotly))),
        h4("<svg> rectangle - tooltip is functional"),
        tags$div(HTML(testRect)),
        h4("plotly heatmap - tooltip does not work"),
        plotlyOutput("heatmap"),
        br(),
        br()
    ),
    server = function(input, output){
        output$heatmap <- renderPlotly(plot_ly() %>%
                                           add_trace(data=dat, x=~x, y=~y, z=~z, type="heatmap") %>%
                                           layout(
                                               xaxis = list(title="foo"),
                                               title = "Title"
                                           )
        )
    }
)
于 2017-10-28T01:03:59.683 回答