Skip to content

Instantly share code, notes, and snippets.

@dbeach24

dbeach24/.block

Last active October 7, 2017 22:22
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 dbeach24/00626420f47c0356853578eb3a9ea754 to your computer and use it in GitHub Desktop.
Save dbeach24/00626420f47c0356853578eb3a9ea754 to your computer and use it in GitHub Desktop.
Download ZIP
Responding to Resize
Raw
.block
license: mit
Raw
README.md

This example shows how to make a D3 visualization that fills up the size of the page at the time it is loaded AND whenever the page is resized by the user. This is necessary when, for example, you want to be able to load your visualization "full screen" and give users the ability to size the window however they want to. This example was created to address this question on the D3 Google Group: Any advice for setting width in iframes with D3?.

To experience the resize behavior, run this example full-screen and resize the browser.

forked from curran's block: Responding to Resize

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Size Example</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
/* Make the chart container fill the page using CSS. */
#chart {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");
function redraw(){
// Extract the width and height that was computed by CSS.
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
// Use the extracted size to set the size of an SVG element.
svg
.attr("width", width)
.attr("height", height);
// Draw an X to show that the size is correct.
var lines = svg.selectAll("line").data([
{x1: 0, y1: 0, x2: width, y2: height},
{x1: 0, y1: height, x2: width, y2: 0}
]);
lines
.enter().append("line")
.style("stroke-width", 50)
.style("stroke-opacity", 0.4)
.style("stroke", "black")
.merge(lines)
.attr("x1", function (d) { return d.x1; })
.attr("y1", function (d) { return d.y1; })
.attr("x2", function (d) { return d.x2; })
.attr("y2", function (d) { return d.y2; })
;
}
// Draw for the first time to initialize.
redraw();
// Redraw based on the new size whenever the browser window is resized.
window.addEventListener("resize", redraw);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment