2

私はjsfiddleでこれを持っています。firefox と chrome で完全に動作しますが、safari に関しては解析エラーが発生します。誰にもアイデアはありますか？

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

これが私が得たエラーです：

エラー: d="MNaN,731.0666666666667LNaN,675.5333333333333LNaN,723.133333333333LNaN,659.6666666666666LNaN,715.2LNaN,580.3333333333325" の解析に問題があります。

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)+')');

}

4

1 に答える 1

4

これは d3 の問題ではありません。このエラーは、javascript new Date() コンストラクターで間違ったデータ型を使用したために発生します。new Date() で文字列型の日付 ("2012-03-20") を使用しています。ただし、これは chrome と firefox では問題ありませんが、サファリは new Date() コンストラクターで数値の日付のみをサポートします。したがって、日付をタイムスタンプに変換してください。

于 2014-08-13T11:01:54.443 に答える