diff --git a/inst/examples/test_multiple_shiny.R b/inst/examples/test_multiple_shiny.R new file mode 100644 index 0000000..fbb4187 --- /dev/null +++ b/inst/examples/test_multiple_shiny.R @@ -0,0 +1,44 @@ +# silly test to check multiple radviz on a page +# and make sure tooltips work as expected + +library(shiny) +library(radviz) + +ui <- fluidPage( + fluidRow( + column( + width = 6, + radvizOutput("radviz1") + ), + column( + width = 6, + radvizOutput("radviz2") + ) + ) +) + +server <- function(input,output,session){ + output$radviz1 <- renderRadviz({ + radviz(iris, diameter=400, margin=100, + use_repulsion=TRUE, draw_links=TRUE, + width=400, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + }) + + output$radviz2 <- renderRadviz({ + radviz(iris, diameter=400, margin=100, + use_repulsion=TRUE, draw_links=TRUE, + width=400, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + }) +} + +shinyApp(ui,server) diff --git a/inst/examples/testmultiple_radviz.Rmd b/inst/examples/testmultiple_radviz.Rmd new file mode 100644 index 0000000..c8766ee --- /dev/null +++ b/inst/examples/testmultiple_radviz.Rmd @@ -0,0 +1,31 @@ +--- +title: "radviz_testmultiple" +author: "Kent Russell" +date: "March 5, 2016" +output: html_document +--- + +```{r setup, include=FALSE} +knitr::opts_chunk$set(echo = TRUE) +``` + +```{r} +library(htmltools) +library(radviz) + +tagList( + lapply( + 1:2, + function(x){ + radviz(iris, diameter=600, margin=100, + use_repulsion=TRUE, draw_links=TRUE, + width=600, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + } + ) +) +``` diff --git a/inst/examples/testmultiple_radviz.html b/inst/examples/testmultiple_radviz.html new file mode 100644 index 0000000..a423091 --- /dev/null +++ b/inst/examples/testmultiple_radviz.html @@ -0,0 +1,124 @@ + + + + + + + + + + + + + +radviz_testmultiple + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
library(htmltools)
+
## Warning: package 'htmltools' was built under R version 3.2.3
+
library(radviz)
+
+tagList(
+  lapply(
+    1:2,
+    function(x){
+      radviz(iris, diameter=600, margin=100, 
+         use_repulsion=TRUE, draw_links=TRUE, 
+         width=600, height=500
+      ) %>% 
+        add_dimensions(c('Sepal.Length', 'Sepal.Width', 
+                         'Petal.Length', 'Petal.Width')) %>% 
+        add_color("Species") %>% 
+        add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }")
+    }
+  )
+)
+

+ +
+

+ + +
+ + + + + + + + diff --git a/inst/htmlwidgets/lib/radviz/radviz-component.js b/inst/htmlwidgets/lib/radviz/radviz-component.js index 6c47de9..25b1af5 100644 --- a/inst/htmlwidgets/lib/radviz/radviz-component.js +++ b/inst/htmlwidgets/lib/radviz/radviz-component.js @@ -220,7 +220,7 @@ var radvizComponent = function() { var tooltipContainer = d3.select(config.el) .append('div') .attr({ - id: 'radviz-tooltip' + class: 'radviz-tooltip' }); var tooltip = tooltipComponent(tooltipContainer.node()); diff --git a/inst/htmlwidgets/lib/radviz/radviz.css b/inst/htmlwidgets/lib/radviz/radviz.css index a990ea2..7154425 100644 --- a/inst/htmlwidgets/lib/radviz/radviz.css +++ b/inst/htmlwidgets/lib/radviz/radviz.css @@ -1,45 +1,42 @@ -body { - font-family: sans-serif; -} -.panel { +.radviz .panel { stroke: black; fill: white; } -.bg { +.radviz .bg { fill: white; } -.link { +.radviz .link { stroke: silver; stroke-opacity: 0.05 } -.dot { +.radviz dot { fill-opacity: 0.5; } -.label-node { +.radviz label-node { fill: silver; } -.active { +.radviz .active { stroke: black; } -.label { +.radviz .label { fill: gray; pointer-events: none; } -#tooltip { +.radviz-tooltip { font-size: 12px; margin-top: 22px; background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; } -#tooltip h1 { +.radviz-tooltip h1 { font-size: 14px; margin: 0; } \ No newline at end of file diff --git a/inst/htmlwidgets/radviz.js b/inst/htmlwidgets/radviz.js index 0084bd4..68011c3 100644 --- a/inst/htmlwidgets/radviz.js +++ b/inst/htmlwidgets/radviz.js @@ -10,6 +10,17 @@ HTMLWidgets.widget({ return { renderValue: function(x) { + + /* fix multiple tooltip problem + for standalone we will need to explicitly + assign position : relative for our + htmlwidget container div + since radviz tooltip needs absolute positioning + + I tested in tagList, rmarkdown, and shiny + */ + el.style.position = "relative"; + var data = HTMLWidgets.dataframeToD3(x.data);