d3 SVG 未在移动设备上显示(iOS)

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 的能力、数据链接不良等。接下来我可以尝试什么?