D3不能在safari中绘制日期轴,解析错误

d3 can not plot date axes in safari, parsing error

本文关键字:错误 日期 绘制 不能 safari D3      更新时间:2023-09-26

我在jsfiddle上有这个。它在firefox和chrome上工作得很好,但是在safari上有一个解析错误。有人有什么想法吗?

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

下面是我得到的错误:

错误:Problem parsing d="MNaN, 731.06666666666666667lnan, 675.53333333333333lnan, 723.13333333333lnan, 659.6666666666666666666lnan,715.2LNaN, 580.33333333333lnan,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)+')');

}

这不是d3的问题。此错误是由于在javascript new Date()构造函数中使用了错误的数据类型而发生的。在new date()中使用字符串类型的日期("2012-03-20")。但是,这在chrome和firefox中是可以的,但是safari在new date()构造函数中只支持数字日期。因此,将日期转换为时间戳