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

【问题标题】：D3 scatterplot using time scale on x-axis -- not working in Firefox在 x 轴上使用时间刻度的 D3 散点图 - 在 Firefox 中不起作用
【发布时间】：2013-12-29 15:53:56
【问题描述】：

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

散点图在 Chrome 中有效，但在 Firefox 中无效。它与使用日期对象作为圆圈的 x 位置有关。

Take a look at the chart in Chrome

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

    ["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

【问题讨论】：

标签： firefox d3.js cross-browser data-visualization

【解决方案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");

【讨论】：