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

Question

我有一个在桌面 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);
}

这在桌面上完美运行，所以我知道代码可以正常工作。在移动设备上，任何 SVG 点都不会显示在地图上。我可以让他们出现的唯一方法是如果我改变这一行：

.style("display", initialDateMatch)

至：

.style("display", "inline")

所以，我知道问题不在于 iOS 渲染 SVG 的能力、与数据的错误链接等。接下来我可以尝试什么？

标签： javascriptd3.jssvgdatepickerleaflet