d3: график хорошо выглядит в firefox, но обрезается в хроме

Question

Я сделал несколько графиков, каждый из которых находится в пределах собственного svg. В firefox они выровнены так, что все видно в svg, но в хроме каждый граф перемещается влево в пределах своего собственного svg, только показывая правую половину графика или так.

Любые мысли?

код:

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); 

Answer 1

Firefox поддерживает функцию SVG 2 из установки преобразования на <svg> элемента. Это не было разрешено в SVG 1.1, и ни один другой UA не поддерживает его.

Если вы хотите сделать что-то кросс-браузер создать <g> элемент дочерний <svg> положить преобразование, что и переместить все <svg> детей, чтобы быть дети <g>.

Спецификация SVG версии 2 не завершена, но UAs реализуют ее, и в этом есть другие вещи, которые Chrome реализует, но Firefox не работает.