rCharts - 在 Shiny 中 leaflet 和 nvd3 之间的冲突问题

Question

我想在同一个闪亮页面中同时包含一个leaflet地图和一个nvd3 rCharts图表。 但是，当我这样做时，leaflet不再显示我用于显示地图上的圆圈/ POI（而不包括nvd3）。 我怀疑这是JS / CSS冲突，因为当我尝试分别包含它们时，它们都可以正常工作。

一旦我启动“runapp”并查看HTML代码，我可以看到包含leaflet和nvd3时唯一的区别是使用的库：

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

当加载nvd3库时，我猜它会影响leaflet。因此，我想知道是否有人可以快速解决这个问题？

以下是我的UI.R文件mainPanel块的摘录。

 # 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')
  ),


 #...

在服务器端，我使用了以下代码来自定义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

}

对于nvd3图表，如下所示：

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));}!#" )

非常感谢！

- user3193920

---

你能展示完整的HTML+JS代码吗？我认为你对冲突的判断不正确。 - Yehoshaphat Schellekens

实际上，在经过多次尝试和错误后，我通过注释nv.d3.css中以下代码（在rCharts包nvd3 CSS库中）解决了问题。/*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%; }svg text { font: normal 12px Arial; }svg .title { font: bold 14px Arial; } */ - user3193920

将此作为回答，供未来用户使用。 - Yehoshaphat Schellekens

Answer 1

对我而言，我只需要在 nv.d3.css 文件中评论宽度和高度。

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%;*/
}

- user1726716

---

这对我也起作用；传单显示得很好。但是通过注释掉它，NVD3图形也发生了变化。你解决了吗？ - Tim_Utrecht

Answer 2

我在svg上注释掉了100%的宽度和高度，并将其添加到了svg.nvd3-svg规则中。这解决了与Leaflet的冲突，但没有破坏我的图表。

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

- jotamon