javascript - d3 : graph looks good in firefox but is cut off in 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> children 成为<g>的 child .

SVG 版本 2 规范尚未完成，但 UA 正在实现其中的一部分，其中还有 Chrome 实现但 Firefox 未实现的其他内容。