d3 axis label cut off in chrome and firefox

Question

I've created a scatter plot in d3. The problem is that the y axis label does not appear in firefox and chrome (works fine in IE). I've tried doing things like making the svg width 100%, but for some reason the label always gets cut off.

<div id="TimeSeriesChartDiv" style="display: inline; float: right; width: 650px;
                            height: 415px">
                        </div>

 //Width and height
        var w = 600;
        var h = 300;
        var padding = 30;
        var margin = { top: 20, right: 20, bottom: 30, left: 20 };
        var df = d3.time.format("%b-%y");


        //Create scale functions
        var xScale = d3.time.scale()
                            .domain([d3.min(dataset, function (d) { return d[0]; }), d3.max(dataset, function (d) { return d[0]; })])
                            .range([padding, w - padding * 2])
                            .nice(5);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function (d) { return d[1]; })])
                             .range([h - padding, padding]);
 //Define X axis
        var xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom")
                          .ticks(5)
                          .tickFormat(df);

        //Define Y axis
        var yAxis = d3.svg.axis()
                          .scale(yScale)
                          .orient("left")
                          .ticks(5);

        //Create SVG element
        var svg = d3.select("#TimeSeriesChartDiv")
                    .append("svg")
                    .attr("width", w + margin.left + margin.right)
                    .attr("height", h + margin.top + margin.bottom);

//Create X axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(20," + (h - padding) + ")")
            .call(xAxis);

        //Create Y axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + 50 + ",0)")
            .call(yAxis);

        svg.append("text")
        .attr("class", "axislabel")
         .attr("text-anchor", "end")
         .attr("x", w / 2)
         .attr("y", h + 8)
         .text("Date");

        svg.append("text")//-->>this is the text that gets cut off
        .attr("class", "axislabel")
        .attr("text-anchor", "end")
        .attr("x", -100)
        .attr("y", -15)
        //.attr("dy", ".75em")
        .attr("transform", "rotate(-90)")
        .text(unit);

Any ideas would be much appreciated. Thanks

Answer 1

You are using negative coordinates for your text, which means they get drawn outside the SVG. It seems that IE9 doesn't seem to clip thing to the SVG area, other browsers do. The best solution is to add enough padding to your graph so that your text can be drawn inside the SVG. Disabling the clipping does not seem to be supported in all browsers.

Answer 2

Thanks Jan -- with additional help from:

http://www.d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html

this worked:

         svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("class", "axislabel")
        .attr("text-anchor", "middle")
        .attr("x", 0 - (h / 2))
        .attr("y",0)//any negative value here wouldnt display in ff or chrome
        .attr("dy", "1em")
        .text(unit);