プロット軸のツールチップのタイトル

Question

私はプロットグラフィックの軸のタイトルのツールチップを持っています。ここで

は私の試みです：

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") 
    ) 
    ) 
    } 
) 

x軸のタイトルのコンテナに属性data-toggleとtitleを期待通りにJSコードを設定しますが、何のツールチップが表示されません。私もコンソールに$($("#heatmap .g-xtitle text")[0]).tooltip()のようなものを試しましたが、何も起こりません。

Answer 1

注：残念ながら、私はあなたの問題を解決していませんが、うまくいけばこの情報が役立ちます。がんばろう！

背景：<svg>ためScalable Vector Graphics（<svg>）

ツールチップのfirst child elementなければならないchild element named <title>

<title>として追加されなければならないようにSVG

1. plotlyは、プロットを作成し、その親の

   の

2. 新しい<svg>要素created in the SVG namespace

SVGのツールチップする必要があります。Plotly対Rectangleは概念実証として

x軸、私はあなたの例に<svg>四角形を追加しました。 JSを使用して要素を<rect>要素の最初の子として追加しました。この要素は長方形のツールチップを生成します。

<title>素子をX軸タイトル・コンテナに追加されるものの、plotlyヒートマップに同じ手順に従うことは、x軸タイトルにヒントを生成しません。

コード

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" 
              ) 
     ) 
    } 
)