html - SVG not working in Firefox 18 -
svg not working in firefox 18, more accurate via firebug. can see values of svg elements changing - nothing appears on screen.
the snippet i'm working http://jsfiddle.net/jcutrell/3c9jw/5/.
here code:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> - jsfiddle demo jcutrell</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <style type="text/css"></style> <style type="text/css"> body { background-color: #555; height: 5000px; } </style> <script type="text/javascript">//<![cdata[ $(function(){ var svg = d3.select("#main"); var line = d3.svg.line() .x(function(d) { return d[0]; }) .y(function(d) { return d[1] + 200; }) .interpolate("monotone"); function init(){ var randdata = []; (var = 0; < 8; i++){ randdata.push([i*50, math.random() * 100]); } svg.data([randdata]) .append("svg:path") .attr("d", line) .attr("fill", "#444") .attr("stroke", "#aaa") .attr("stroke-width", 7); svg.selectall("circle") .data(randdata) .enter().append("circle") .attr("cx", function(d,i){ return d[0]; }) .attr("cy", function(d,i){ return d[1] + 200 }) .attr("fill", "#dfdfdf") .attr("r", 10); setinterval(refresh, 1200); } function refresh(){ var randdata = []; (var = 0; < 8; i++){ randdata.push([i*50, math.random() * 100]); } svg.data([randdata]) .select("path") .transition() .duration(500) .attr("d", line); svg.selectall("circle") .data(randdata) .transition() .duration(500) .attr("cy", function(d,i){ return d[1] + 200 }); } init(); }); </script> </head> <body> <script src="http://d3js.org/d3.v2.js"></script> <svg id="main"></svg> </body> </html> it works fine in chrome though.
you need set height , width of svg element, show up.
Comments
Post a Comment