Question

不，这不是跨资源错误。该代码适用于Mozilla Firefox，而不适用于Chrome，IE或Safari。

我已将代码作为要点上传，可在此处进行测试（检查控制台是否存在错误）：https://bl.ocks.org/moman822/7a05fb2becde5f2081e9bdb4ee5c9511。选中复选框，然后单击按钮激活图表动画。

我已将错误缩小到路径变量的附加。这是出错的部分（第199行，输出记录到控制台）。

svg.selectAll('path')
        .data(datNestTemp, function(d){console.log(d); return d})
        .enter()
        .append('path')
            .attr('d',function(d){console.log(lineScale(d.values)); return lineScale(d.values)})
            .attr('class',function(d){return d.key.replace(/ /g,'')})
            ...

lineScale看起来像这样：

lineScale = d3.line()
            .curve(d3.curveCardinal())

在Mozilla上，路径被正确解析。但是，在Chrome上，路径未正确解析，而是输出此字符串（由console.log和错误输出显示）：

MNaN,512.1796016898008CNaN,512.1796016898008,NaN,508.7715147857574,NaN,508.7715147857574CNaN,508.7715147857574,NaN,502.3716757191712,NaN,502.3716757191712CNaN,502.3716757191712,NaN,495.0533896600282,NaN,495.0533896600282CNaN,495.0533896600282,NaN,490.1222289277811,NaN,490.1222289277811CNaN,490.1222289277811,NaN,489.2205190102595,NaN,489.2205190102595CNaN,489.2205190102595,NaN,486.3940454636894,NaN,486.3940454636894CNaN,486.3940454636894,NaN,481.

等

我不知道为什么这适用于Mozilla而不是Chrome。这是一个错误吗？我做错了吗？

Answer 1

在Chrome中，您的timeScale比例不正确，更具体地说，其域名为[NaN, NaN]。您正尝试使用dateString实例化日期，但该字符串的格式不正确 - 请阅读有关Date.parse的更多信息。

比较Chrome和FF中的以下代码：

[new Date('2005,0,1'), new Date('2016,0,1')]

在FF中，该数组可以解析为迄今为止，在Chrome中它包含无效日期。

总而言之，您需要创建一个正确的时间刻度，例如像这样：

  var min = d3.min(data, function(d) {
    return (+d.Year)  + ',0,1'
  }).split(',')

  var max = d3.max(data, function(d) {
    return +d.Year  + ',0,1'
  }).split(',')

  timeScale = d3.scaleTime()
    .domain([new Date(min[0], min[1], min[2]), new Date(max[0], max[1], max[2])])
    .range([0, width])

示例：https://jsfiddle.net/devmzgwj/

D3路径在Mozilla上运行，而不在Chrome上运行

1 个答案: