CODEWITHSUNDEEP
javascriptgoogle-chromed3.jssvg
As3adTintin
As3adTintin

Reputation: 2476

d3: graph looks good in firefox but is cut off in chrome

I've made some graphs, each within its own svg. In firefox they are aligned so everything is visible inthe svg, but in chrome each graph is moved left within its own svg, only showing the right half of the 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);

Upvotes: 0

Views: 487

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

Firefox supports the SVG 2 feature of setting a transform on the <svg> element. This was not allowed in SVG 1.1 and no other UA supports it yet.

If you want to do something cross browser create a <g> element child of the <svg> put the transform on that and move all the <svg> children to be children of the <g>.

The SVG version 2 specification is unfinished but UAs are implementing bits of it and there are other things in it that Chrome implements but Firefox does not.

Upvotes: 2

Related Questions