D3 Graph working in chromium, but not in other browsers
Question
I'm trying to access dates and some values in d3 js. Shared my fiddle, can any one help me out in correcting my code and can any one tell me the mistake as well.
<!DOCTYPE html>
<html>
<head>
<title>trial</title>
<link rel="stylesheet" href="css/style.css">
<body>
<svg id="visualisation" width="1000" height="500"></svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
https://jsfiddle.net/c6jf5yg0/6/
Observation: The attribute id is not computing properly in the broswers. thanks in advance
2 answers
solution1
0 2016-01-11 08:01:29
Path element attribute value has NaN firefox is the first root cause.
<path d="MNaN,20LNaN,240.23584905660306LNaN,480" stroke="blue" stroke-width="2" fill="none"/>
Why it is updating NaN?
In extent function of X Range like below.
d3.extent(lineData, function(d) {
return new Date(d.x);
// new Date("2016-01-08 03:01:19.418110");
// Firefox output Date {Invalid Date}
// Chrome it works.
})
How to Fix this issue ?
Update your lineData like below. by adding T in between date and time.
var lineData = [{
"x": "2016-01-08T03:01:19.418110",
"y": 0.8076999999999999
}, {
"x": "2016-01-08T05:10:19.838509",
"y": 0.692666666666667
}, {
"x": "2016-01-08T09:54:13.022163",
"y": 0.5674333333333333
}];
Working Screenshot:
solution2
0 ACCPTED 2016-01-11 08:42:45
Add the "T" in between date and time and that is ECMA Specification
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.2
Working Demo:
InitChart(); function InitChart() { var lineData = [{ "x": "2016-01-08T03:01:19.418110", "y": 0.8076999999999999 }, { "x": "2016-01-08T05:10:19.838509", "y": 0.692666666666667 }, { "x": "2016-01-08T09:54:13.022163", "y": 0.5674333333333333 }]; var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = { top: 20, right: 20, bottom: 20, left: 50 }, xRange = d3.time.scale() .range([MARGINS.left, WIDTH - MARGINS.right]) .domain(d3.extent(lineData, function(d) { return new Date(dx); })), yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) { return dy; }), d3.max(lineData, function(d) { return dy; }) ]), xAxis = d3.svg.axis() .scale(xRange) .tickSize(5) .tickSubdivide(true) .tickFormat(d3.time.format('%X')), yAxis = d3.svg.axis() .scale(yRange) .tickSize(5) .orient("left") .tickSubdivide(true); vis.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") .call(xAxis); vis.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(" + (MARGINS.left) + ",0)") .call(yAxis); var lineFunc = d3.svg.line() .x(function(d) { return xRange(new Date(dx)); }) .y(function(d) { return yRange(dy); }) .interpolate('linear'); vis.append("svg:path") .attr("d", lineFunc(lineData)) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); }
<!DOCTYPE html> <html> <head> <title>trial</title> <body> <svg id="visualisation" width="1000" height="500"></svg> <script src="http://d3js.org/d3.v3.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.