Dia*_*e12 5 javascript svg datepicker d3.js leaflet
我有一个在桌面 Chrome 上运行良好的应用程序。这是一个传单地图,“事件”的 SVG 图层根据日历中选择的日期动态附加到地图上(我使用的是 d3.js 和 datepicker.js)。但是,在 iOS 上的 Chrome 和 Safari 中,SVG 图层不显示。这是(非常缩写的)代码:
//Build the datepicker using datepicker.js
const picker = datepicker(document.querySelector('#datepicker'), {
// Get selected date from datepicker
onSelect: function(instance) {
var instanceSplit = instance.dateSelected.toString().split(" " ,4)
var instanceClean = instanceSplit.toString().replace(/,/g, ' ')
selectedDate = instanceClean
update()
},
});
// render d3 svg
var events = mapG.selectAll("circle")
.data(allSFEvents)
.enter().append("circle")
.attr("class", 'events')
.style("fill", '#ffba00')
.attr("r", 7.5)
.style("display", initialDateMatch)
.style("pointer-events", "all")
// Display only events on today's date
function initalDateMatch(data){
//Do some stuff to get if today's date matches event date
if (todaysDate === data.dateFormatted) {
return 'inline'
} else {
return 'none'
}
}
//Check if selected matches the "date" property of data, if so, return "inline"
function dateMatch(data){
if (selectedDate === data.dateFormatted) {
return 'inline'
} else {
return 'none'
}
}
//Pass in the returned value above when new date is selected in order to filter points
function update(value) {
d3.selectAll(".events")
.style("display", dateMatch);
}
Run Code Online (Sandbox Code Playgroud)
这在桌面上完美运行,所以我知道代码可以按原样运行。在移动设备上,地图上不会显示任何 SVG 点。我能让它们出现的唯一方法是更改此行:
.style("display", initialDateMatch)
Run Code Online (Sandbox Code Playgroud)
到:
.style("display", "inline")
Run Code Online (Sandbox Code Playgroud)
所以,我知道问题不在于 iOS 渲染 SVG 的能力、数据链接不良等。接下来我可以尝试什么?