fix multiple radviz on a page

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)

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']; }")
+    }
+  )
+)
+```

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());
 

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;
 }

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);