| license: mit |
I noticed that if you search Google for "responding to resize", the first result is this Responding to Resize example I made some time back.
So, I wondered, do many people find this useful? Might there be an opportinuty to create a useful library that makes it easier to get started with "full size" graphics that respond to resize?
This example is a prototype of such a library. Would this be useful to you? If so, let me know!
forked from curran's block: Responding to Resize
| // A utility for creating "full size" graphics programs with D3.js. | |
| // Useful for full-screen graphics, or graphics indended for use inside iFrames. | |
| function fullsize(render){ | |
| // Append a div to the body, | |
| // make it fill the display using CSS, | |
| // store a reference to the DOM node for later use. | |
| var div = d3.select("body") | |
| .append("div") | |
| .style("position", "fixed") | |
| .style("left", "0px") | |
| .style("right", "0px") | |
| .style("top", "0px") | |
| .style("bottom", "0px") | |
| .node(); | |
| // Append an SVG as a child of the container DOM node. | |
| var svg = d3.select(div) | |
| .append("svg"); | |
| // This function updates the size of the SVG | |
| // and invokes the render() function. | |
| function redraw(){ | |
| // Extract the width and height that was computed by CSS. | |
| var width = div.clientWidth; | |
| var height = div.clientHeight; | |
| // Use the extracted size to set the size of an SVG element. | |
| svg | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Invoke the render function passed into fullsize(). | |
| render(svg, width, height); | |
| } | |
| // Draw for the first time to initialize. | |
| redraw(); | |
| // Redraw based on the new size whenever the browser window is resized. | |
| window.addEventListener("resize", redraw); | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Fullsize.js Prototype</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <script src="fullsize.js"></script> | |
| <script> | |
| // Invoke the fullsize.js library. | |
| // This adds an SVG element to the page, | |
| fullsize(render); | |
| // This render function will be invoked on page load, | |
| // and every time the browser window resizes, | |
| // passing the updated width and height. | |
| function render(svg, width, height){ | |
| // Draw an X to show that the size is correct. | |
| var data = [ | |
| {x1: 0, y1: 0, x2: width, y2: height}, | |
| {x1: 0, y1: height, x2: width, y2: 0} | |
| ]; | |
| var lines = svg.selectAll("line").data(data); | |
| 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; }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
