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>的{{1}}元素子元素，并对其进行转换，并将所有<svg>个子项移动为{{1}的子项}}

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

d3：图表在Firefox中看起来不错，但在chrome中被切断了

1 个答案: