d3 axis label cut off in chrome and firefox
10,359
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.
Author by
pvitt
Updated on June 21, 2022Comments
-
pvitt almost 2 years
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