javascript - d3: graph looks good in firefox but is cut off in chrome -
i've made graphs, each within own svg. in firefox aligned visible inthe svg, in chrome each graph moved left within own svg, showing right half of graph or so.
any thoughts?
code:
var margin = {top: 20, right: 20, bottom: 100, left: 75}, width = 300 - margin.left - margin.right, height = 1600 - margin.top - margin.bottom; var x = d3.time.scale().range([0, width/2.5]); var xaxis = d3.svg.axis().scale(x).orient("bottom").innerticksize(4).ticks(6); x.domain(d3.extent([parsedate("2003.0"), parsedate("2014.0")])); function updategraphs(newdata) { d3.selectall("svg").each(function(d, i){ line = d3.svg.line() .x(function (d) { return x(d.date); }) .y(function (d) { return yscale(d[newdata]); }) svg.transition().duration(1000).select(".line") .attr("id", function(d) { return d.key ;}) .attr('class', 'line') .attr('opacity', .8) .attr('d', function(d) { return line(d.values); }); svg.transition().duration(1000).select(".y.axis") .call(yaxis); }); } var svgcontainer = d3.select("body").append("div").attr("id", "graphs").selectall("svg") .data(data2) svgcontainer.enter() .append("svg") .attr("width",175) .attr("height", 400) .attr("transform", "translate(" + margin.left + "," + margin.top+ ")"); d3.selectall("svg").each(function(d, i){ var line = d3.svg.line() .x(function (d) { return x(d.date); }) .y(function (d) { return yscale(d.app); }) svg.append("path") .attr("id", function(d) { return d.key ;}) .attr('class', 'line') .attr('opacity', .8) .attr('d', function(d) { return line(d.values); }) svg.append("g") .attr("class", "y axis") .call(yaxis); svg.append("text") .attr("class", "x label") .attr("text-anchor", "end") .attr("x", 58) .attr("y", -5) .text(racename[i]) .style("font-size", "14px"); }); d3.selectall("svg") .append("g") .attr("class", "x axis") .attr("transform", "translate(0," + 188 + ")") .call(xaxis);
firefox supports svg 2 feature of setting transform on <svg> element. not allowed in svg 1.1 , no other ua supports yet.
if want cross browser create <g> element child of <svg> put transform on , move <svg> children children of <g>.
the svg version 2 specification unfinished uas implementing bits of , there other things in chrome implements firefox not.
Comments
Post a Comment