问题描述
我正在尝试在同一闪亮的页面中同时包含一张传单地图和一个nvd3 rCharts图.当我这样做时,传单不再显示我过去在地图上显示的圆圈/POI(但不包括nvd3).我怀疑这是JS/CSS冲突,因为当我尝试单独包含它们时,效果很好.
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.
一旦启动"runapp"并查看html代码,则可以看到,当同时包含使用的库和Leaflet和nvd3时,唯一的区别是:
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>
当加载nvd3库时,我想它与传单混为一谈.因此,我想知道是否有人可以快速解决此问题?
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?
下面是我的UI.R文件mainPanel块的摘录
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
}
对于nvd3图,如下所示
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));}!#" )
非常感谢!
推荐答案
我注释掉了svg的100%宽度和高度,并将其添加到svg.nvd3-svg规则中.这解决了与Leaflet的冲突,但没有弄乱我的图表.
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%;
}
这篇关于rCharts-Shiny中的传单和nvd3之间的冲突的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!