D3路径适用于Mozilla，不适用于Chrome(D3 path working on Mozilla, not working on Chrome)

不，这不是跨资源错误。该代码适用于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。这是一个错误吗？难道我做错了什么？

And no, it is not a cross-resource error. The code works on Mozilla Firefox and not on Chrome, IE, or Safari.

I have uploaded the code as a gist and it can be tested here (check console for errors): https://bl.ocks.org/moman822/7a05fb2becde5f2081e9bdb4ee5c9511. Check the checkbox then click the button to activate the graph animation.

I have narrowed the error down to the appending of the path variables. This is the section where it goes wrong (line 199, outputs logged to console).

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 looks like this:

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

On Mozilla, the path is parsed correctly. However, on Chrome the path is not parsed correctly, instead outputting this string (shown by console.log and error output):

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.

etc.

I am at a loss for why this works on Mozilla and not Chrome. Is this a bug? Am I doing something wrong?

最满意答案

在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/

In Chrome your timeScale scale is incorrect, more specifically its domain is [NaN, NaN]. You are trying to instantiate date with dateString but that string is not in the right format - read more about Date.parse.

Compare the following code in Chrome and FF:

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

In FF that array can be parsed to date, in Chrome it contains invalid dates.

To sum up, you need to create a correct time scale, e.g. like this:

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])

example: https://jsfiddle.net/devmzgwj/

更多推荐