不,这不是跨资源错误。 该代码适用于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/
更多推荐
发布评论