javascript - IE8 Issue with R2D3 -
i have been using r2d3 drawing force directed layout. when run on ie8 see arg: illegal input string in vector2d seen below:
this happens transform attribute apply layout.
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); i doubt translate function returns value browser engine not able read. possible large number. there way can position nodes without using transform attr. following code:
d3.json("egograph.json", function(json) { nodeset = json.nodes; linkset = json.links; var width = 600; var height = 500; var centernodesize = 30; var nodesize = 10; var rscale = d3.scale.linear().domain([0, d3.max(nodeset, function (d) { return d.data })]).range([5, 20]); var color = ['#b43104','#f5ecce', '#f3e2a9', '#f7d358', '#ffbf00', '#ff8000']; // create canvas... var svgcanvas = d3.select('#chart').append("svg:svg").attr( "width", width).attr("height", height).append("svg:g") .attr("class", "focalnodecanvas").attr("transform", "translate(" + width / 3.333333 + "," + height / 2.352 + ")") var node_hash = []; //var type_hash = []; // create hash allows access each node id nodeset.foreach(function(d, i) { node_hash[d.journalname] = d; //type_hash[d.type] = d.type; }); // append source object node , target object node each link records... linkset.foreach(function(d, i) { d.source = node_hash[d.sourceid]; d.target = node_hash[d.targetid]; if (d.sourceid == focalnodeid) { d.direction = "out"; } else { d.direction = "in"; } }); // create force layout , bind nodes , links var force = d3.layout.force().nodes(nodeset).links(linkset).charge( -1000) //.gravity(.2) //.linkstrength(20) .size([ width / 8, height / 10 ]).linkdistance(function(d) { if (width < height) { return width * 1 / 3; } else { return height * 1 / 3 } }) // controls edge length .on("tick", tick).start(); // draw lines links between nodes var link = svgcanvas.selectall(".glink").data(force.links()) .enter().append("g").attr("class", "glink").append("line") .attr("class", "link").attr("stroke-width", function(d) { return (math.random() * (10 - 1) + 1); }).style("stroke", "#808080").attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; }); // create nodes var node = svgcanvas.selectall(".node").data(force.nodes()).enter() .append("g").attr("class", "node").attr("fixed", function(d) { return true }).call(force.drag); // append circles nodes node.append("circle").attr("x", function(d) { return 100; }).attr("y", function(d) { return 30; }).attr("r", function(d) { if (d.journalname == focalnodeid) { return centernodesize; } else { return rscale(d.data); } }) // node radius .style("fill", function(d) { return color[math.floor(math.random() * (5 - 0 + 1)) + 0]; }) // make nodes hollow looking .on("mouseover", function() { d3.select(this).attr("stroke", "#808080").attr("stroke-width", 5);}) .on("mouseout", function(){ d3.select(this).attr("stroke", function(d) { return color[math.floor(math.random() * (5 - 0 + 1)) + 0]; }).attr("stroke-width", 0);}) .call(force.drag); // append text nodes node.append("text").attr("x", function(d) { if (d.journalname == focalnodeid) { return 0; } else { return 20; } }).attr("y", function(d) { if (d.journalname == focalnodeid) { return 0; } else { return -10; } }).attr("text-anchor", function(d) { return "middle"; }).attr("font-family", "arial, helvetica, sans-serif").style( "font", "normal 12px arial").text(function(d) { return d.journalname; }); function tick() { link.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } });
transform doesn't work in ie8, , in ie9 need browser prefix ms-
so need abstract transform call, or use expression in css
http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx
Comments
Post a Comment