Question

我创建了一个非常简单的散点图，显示了一个人随着时间推移的举重进度。 x轴是以天为单位的时间刻度（每天有一个圆圈），y轴是当天提升的磅数。

散点图适用于Chrome，但不适用于Firefox。它与使用日期对象作为圆圈的x位置有关。

以下是我的数据集的两行，以显示它的格式（日期是每行的第一项）：

    ["2011-09-16",150,"Cottage cheese and 1 apple",170,16,"4 Chicken breast strips",130,17,"Hibachi grill: onion soup, salad, 2 shrimp pieces, vegetables. 12 oz chicken, rice",880,99,"Small hard frozen yogurt",300,6,"Cottage cheese, greek yogurt, a bunch of icebreaker sours",230,26,1710,164,175,"Back/biceps, 31 pushups",135,0,0],
    ["2011-09-17",150,"15 peanuts",80,4,"Dim Sum",1000,40,"Azn salad, 2 serv chicken breast",490,57,"8.8 oz mixx",264,9,"(No Data)",0,0,1833.6875,109.55,174.2," ",135,0,0],

以下是我绘制圆圈的方法，以及我用来格式化日期的一些相关函数/变量：

    //Width and height
    var w = 4200;
    var h = 200;
    var padding = 35;

    var mindate = new Date("2011-9-15");
    var maxdate = new Date("2012-5-29");

    //Create scale functions
    var xScale = d3.time.scale()
                        .domain([mindate, maxdate])
                        .range([padding, w - padding * 2]);

    var format = d3.time.format("%Y-%m-%d");
    var dateFn = function(d) {return format.parse(d[0])};

    //Create circles
        svg.selectAll("circle")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) {
                return xScale(dateFn(d));
           })
           .attr("cy", function(d) {
                return yScale(d[1]);
           })
           .attr("r", 6)
           .attr("fill", "gray")
           .attr("opacity", .5)

就像我说的那样，它在Chrome中完全符合我的要求，但在Firefox中，所有的圆圈都在cx = 0之上。任何想法，将不胜感激。我问了我当地的d3专家，他向我展示了他做的一个项目，由于使用日期对象绘制圆圈，因此在Firefox中也失败了。他只是放弃了。 a link to his project

Answer 1

问题不在于您解析日期的方式，而在于您设置比例的方式。

var mindate = new Date("2011-9-15");
var maxdate = new Date("2012-5-29");

这是仅在Chrome中正常运行的代码，因为您依赖于使用构造函数进行日期解析，而不是像您在其余日期那样明确解析。

修复很简单 - 只需解析您用于设置比例域的日期：

var format = d3.time.format("%Y-%m-%d"),
    mindate = format.parse("2011-09-15"),
    maxdate = format.parse("2012-05-29");

使用x轴上的时间刻度的D3散点图 - 在Firefox中不起作用

1 个答案: