rCharts - conflict between leaflet and nvd3 in Shiny

Question

I am trying to include in the same shiny page both a leaflet map and a nvd3 rCharts graph. When I do so, leaflet is no longer displaying the circles / POI I used to display on the map (while not including nvd3). I suspect it is a JS / CSS conflict as when I try to include them separately it works just nice.

Once I launch "runapp" and look at the html code, I can see the only difference when including both leaflet and nvd3 are the libraries in use:

 <link href="nvd3/css/nv.d3.css" rel="stylesheet"/>
<link href="nvd3/css/rNVD3.css" rel="stylesheet"/>
<script src="nvd3/js/d3.v3.min.js" type="text/javascript"></script>
<script src="nvd3/js/nv.d3.min-new.js" type="text/javascript"></script>
<script src="nvd3/js/fisheye.js" type="text/javascript"></script>
<link href="leaflet/external/leaflet.css" rel="stylesheet"/>
<link href="leaflet/external/leaflet-rCharts.css" rel="stylesheet"/>
<link href="leaflet/external/legend.css" rel="stylesheet"/>
<script src="leaflet/external/leaflet.js" type="text/javascript"></script>
<script src="leaflet/external/leaflet-providers.js" type="text/javascript"></script>
<script src="leaflet/external/Control.FullScreen.js" type="text/javascript"></script>

when nvd3 libraries are loaded, I guess it is messing with leaflet. Therefore I am wondering if anyone has a quick fix to soldve this issue?

Below is an extract of my UI.R file mainPanel block

 # nvd3 part part

mainPanel(                                                                                       
tabsetPanel(
tabPanel("All trips", tableOutput("view"), tags$head(tags$style("#view th {color:slategray; background-color: #F2F2F2; text-align:left}", media="screen", type="text/css")),

conditionalPanel(
    condition = "input.comparison == true",
    showOutput('comp1', 'nvd3'),
    br(),
    br(),
    br(),
    br(),
    showOutput('comp2', 'nvd3'),
    br(),
    br(),
    br(),
    br()
      )
    ),

 # leaflet part

tabPanel("Selected trip",
    tabsetPanel(
        tabPanel("map", tags$style('.leaflet {height: 400px;}'), showOutput('myChart', 'leaflet'),
        br(),
        h2("Detailed information", style = "color:slategray; border-bottom:2px solid slategray; padding-bottom: 0.1in"), htmlOutput('details')
  ),


 #...

Server side, I used the following code to customize leaflet

# Plot
dat_list <- toJSONArray2(dat, json = F)

L1 <- Leaflet$new()
mid <- round(nrow(dat),0)/2
L1$setView(c(dat$lat[mid], dat$lng[mid]), 13)

L1$geoJson(toGeoJSON(dat_list, lat = 'lat', lon = 'lng'),
           onEachFeature = '#! function(feature, layer){
           layer.bindPopup(feature.properties.label)
} !#',
           pointToLayer =  "#! function(feature, latlng){
           return L.circleMarker(latlng, {
           radius: 4,
           fillColor: feature.properties.Color || 'red',    
           color: '#000',
           weight: 1,
           fillOpacity: 0.8
           })
} !#"         
           )
L1

}

For nvd3 graph it is as follows

p <- nPlot(AC ~ Time, group = "id", data = t, type = "lineWithFocusChart")
p$xAxis( tickFormat="#!function(d) {return d3.time.format('%X')(new Date(d));}!#" )
p$x2Axis( tickFormat="#!function(d) {return d3.time.format('%X')(new Date(d));}!#" )

Many thanks!

Answer 1

For me, I needed only comment on the width and height in nv.d3.css file.

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  /*width:100%;
  height:100%;*/
}

Answer 2

I commented out the 100% width and height on the svg and added it to the svg.nvd3-svg rule. This fixed the conflict with Leaflet but did not mess up my charts.

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;
  /*width:100%;
  height:100%;*/
}

/********************
  Default CSS for an svg element nvd3 used
*/
svg.nvd3-svg {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
     user-select: none;
    display: block;
    width:100%;
    height:100%;
}