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，数据链接不正确等。在此我不胜感激。谢谢！

d3 SVG未显示在移动设备（iOS）上

0 个答案: