Skip to content

Instantly share code, notes, and snippets.

@pbogden

pbogden/README.md

Last active January 29, 2017 14:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbogden/8c288fa8dde5ff4e6fb8 to your computer and use it in GitHub Desktop.
Save pbogden/8c288fa8dde5ff4e6fb8 to your computer and use it in GitHub Desktop.
Download ZIP
IE problem
Raw
README.md

IE problem

Note: If you're not using IE, you're probably not seeing anything wrong. But if you're using IE, then the height of the SVG is 150px, no matter how many times you refresh the browser -- that's not cool.

With nice browsers, every time you refresh the page the SVG height adjusts to contain a line of circles that always fills the light gray box. Most modern browsers will set the SVG and container height according to the aspect ratio of the viewbox attribute, and the SVG will fill the width of the page.

But not IE (tested with IE 9, 10 & 11): IE sets the SVG height to 150px, regardless of the aspect ratio of the SVG. So the you'll probably see a random amount of empty gray space to the right of the circles every time you refresh. Click here for a solution to the IE problem.

Raw
index.html
<!doctype HTML>
<meta charset="utf-8">
<title>IE problem</title>
<style>
body {
margin: 0;
}
#container {
background-color: #000; /* to verify that you can't see the container */
}
#graphic {
background-color: #ccc;
}
svg {
display: block; /* so there's no space below the SVG */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body>
<div id='container'></div>
<script>
var n = 6, // "n" random circles determine the SVG's aspect ratio
radii = d3.range(n).map(function(){ return Math.random(); }),
x = radii.map(function(d, i) { return d + 2 * d3.sum( radii.slice(0, i) ); }),
width = 2 * d3.sum(radii),
height = 2 * d3.max(radii),
colors = d3.scale.category10();
var svg = d3.select("#container").append('svg')
.attr('id', 'graphic')
.attr('viewBox', "0, 0, " + width + ", " + height) // min-x, min-y, width, height
.attr('preserveAspectRatio', "xMinYMid");
svg.selectAll('circle')
.data(radii)
.enter()
.append('circle')
.attr('r', function(d) { return d; })
.attr('cx', function(d,i) { return x[i]; })
.attr('cy', height / 2)
.style('fill', function(d,i) { return colors(i); });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment