d3：圖形在Firefox中看起來不錯，但在chrome中被剪掉

Question

我制作了一些圖形，每個圖形都在自己的svg中。 在Firefox中，它們是對齊的，因此在svg中是可見的，但是在chrome中，每個圖形都在其自己的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>元素上設置轉換的SVG 2功能。 SVG 1.1中不允許這樣做，並且尚無其他UA支持。

如果你想做些什么跨瀏覽器創建一個<g>的子元素的<svg>穿上了轉換和移動所有的<svg>的孩子是孩子們<g>

SVG版本2規范尚未完成，但是UA正在實現它的一部分，Chrome還實現了其中的其他功能，而Firefox沒有實現。