Created
July 6, 2016 20:46
-
-
Save Guerino1/551b722a34a1d7dafe6f7a468bb8f051 to your computer and use it in GitHub Desktop.
Resizing SVG and shapes in a responsive manner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Example of Dynamically Resizing SVG Canvas and Shapes</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script> | |
| <!--[if gt IE 7]> | |
| <style>body { overflow-y:scroll; } </style> | |
| <![endif]--> | |
| <script type="text/javascript"> | |
| <!-- d3.select(self.frameElement).style("height", "1800px"); --> | |
| <!-- d3.select(self.frameElement).style("width", "1200px"); --> | |
| </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 draw(){ | |
| // Extract the width and height that was computed by CSS. | |
| var width = chartDiv.clientWidth; | |
| var height = chartDiv.clientHeight; | |
| var circleData = [ | |
| {"label": "Node 1", "multiplier": 1, "color":"red"}, | |
| {"label": "Node 2", "multiplier": 3, "color":"yellow"}, | |
| {"label": "Node 3", "multiplier": 5, "color":"green"}, | |
| {"label": "Node 4", "multiplier": 7, "color":"blue"} | |
| ]; | |
| // Use the extracted size to set the size of an SVG element. | |
| svg | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Draw two lines (from corner to opposite corner) | |
| var lines = svg.selectAll("line") | |
| .data([ | |
| {x1: 0, y1: 0, x2: width, y2: height}, | |
| {x1: 0, y1: height, x2: width, y2: 0}, | |
| {x1: width/2, y1: height, x2: width/2, y2: 0}, | |
| {x1: 0, y1: height/2, x2: width, y2: height/2} | |
| ]); | |
| lines.enter().append("line"); | |
| 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; }) | |
| .style("stroke-width", 30) | |
| .style("stroke-opacity", 0.5) | |
| .style("stroke", "maroon"); | |
| var circles = svg.selectAll("circle") | |
| .data(circleData); | |
| circles.enter().append("circle"); | |
| circles | |
| .attr("r", width/8) | |
| .attr("cx", function(d){ return (d.multiplier*width/8); }) | |
| .attr("cy", function(d){ return height/2; }) | |
| .style("opacity", 0.4) | |
| .style("fill", function(d){ return d.color; }); | |
| } | |
| // Draw for the first time to initialize. | |
| draw(); | |
| // Redraw based on the new size whenever the browser window is resized. | |
| window.addEventListener("resize", draw); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment