javascript - d3 无法在 safari 中绘制日期轴，解析错误

Question

我在 jsfiddle 上有这个。它在 Firefox 和 chrome 上完美运行，但在 safari 上出现解析错误。有人有一些想法吗？

http://jsfiddle.net/meetamit/9qdBD/1/

这是我得到的错误:

错误:解析时出现问题 d="MNaN,731.0666666666667LNaN,675.5333333333333LNaN,723.1333333333333LNaN,659.6666666666666LNaN,715.2LNaN,580.33333333333 33LNaN,25"

function drawBaseGraph(containerId){
var data = [{"date":"2012-03-20","total":1},{"date":"2012-03-21","total":8},{"date":"2012-03-22","total":2},{"date":"2012-03-23","total":10},{"date":"2012-03-24","total":3},{"date":"2012-03-25","total":20},{"date":"2012-03-26","total":90}];


var margin = {top: 5, right: 20, bottom: 20, left:20};
var padding = 10;
var formatter = d3.time.format("%m/%d")
var parser = d3.time.format("%Y-%m-%d");
  var svg = d3.select('#'+containerId).append("svg")
    .attr("class","chart")
    .attr("width", '90%')
    .attr("height", '90%')
    .attr('transform', 'translate(' + margin.left + ',0)');

  var width = $('#'+containerId).find('svg').width();
  var height = $('#'+containerId).find('svg').height();
  var x = d3.time.scale()
    .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
    .range([margin.left, width - margin.left - margin.right]);

  var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.total; })])
    .range([height - margin.top-margin.bottom,margin.bottom + margin.top]);

  var xScale = d3.time.scale();
  var yScale = d3.scale.linear();

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.days)
    .tickFormat(d3.time.format('%m/%d'))
    .tickSize(0)
    .tickPadding(8);

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(4)
    .tickPadding(0);

  svg.append("g")
    .attr("class","x axis")
    .call(xAxis)
    .attr('transform','translate('+margin.left+','+(height-margin.top-margin.bottom)+')');
  svg.append("g")
    .attr("class","y axis")
    .call(yAxis)
    .attr('transform','translate('+margin.left+','+-padding+')');


  var line = d3.svg.line()
    // assign the X function to plot our line as we wish
    .x(function(d,i) { 
        console.log(parser.parse(d.date))
        return x(parser.parse(d.date))
         //return formatter(parser.parse(d.date)); 
       })
    .y(function(d) { 
         console.log(d.total);
         d.total = parseInt(d.total);
         return y(d.total); 
       });

  svg.append("svg:path")
    .style("fill", "none")
    .style("stroke", "#000")
    .attr("d", line(data));

  svg.selectAll("line.y")
    .data(y.ticks(4))
    .enter().append("line")
    .attr("class", "dashed")
    .attr("x1", margin.left)
    .attr("x2", width-margin.right-margin.left)
    .attr("y1", y)
    .attr("y2", y)
    .style("stroke", "#ccc")
    .attr('transform', 'translate('+margin.left+','+(-padding)+')');

}

Answer 1

这不是 d3 问题。发生此错误的原因是在 javascript new Date() 构造函数中使用了错误的数据类型。 您在 new Date() 中使用字符串类型日期(“2012-03-20”)。然而，这对于 chrome 和 firefox 来说是可以的，但 safari 仅支持 new Date() 构造函数中的数字日期。因此，将您的日期转换为时间戳。