This example demonstrates how to scale a D3 symbol to fit inside a specified rectangular bounding box using getBBox.
Last active
November 13, 2016 17:33
-
-
Save mbostock/3dd515e692504c92ab65 to your computer and use it in GitHub Desktop.
Fitted Symbols
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
| license: gpl-3.0 |
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| rect { | |
| fill: none; | |
| stroke: #aaa; | |
| stroke-width: 2px; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <svg width="960" height="500"> | |
| <rect width="400" height="400" x="280" y="50"/> | |
| <g transform="translate(480,250)"> | |
| <path id="symbol"/> | |
| </g> | |
| </svg> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var path = d3.select("path"), | |
| rect = d3.select("rect"), | |
| width = +rect.attr("width"), | |
| height = +rect.attr("height"); | |
| var symbol = d3.svg.symbol(), | |
| symbolIndex = -1, | |
| symbolTypes = d3.svg.symbolTypes; | |
| setInterval(function() { | |
| symbolIndex = (symbolIndex + 1) % symbolTypes.length; | |
| symbol.type(symbolTypes[symbolIndex]); | |
| path.attr("d", symbol.size(64)); | |
| var box = path.node().getBBox(), | |
| error = Math.min(width / box.width, height / box.height); | |
| path.transition().duration(1500).attr("d", symbol.size(error * error * 64)); | |
| }, 2000); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Mike, thanks for the beautiful d3 library and all of the examples. I have a question concerning the licensing and/or copyright of the examples, namely "What is the licensing and/or copyright situation of your examples?" I have modified the javascript from http://bl.ocks.org/mbostock/4339083 quite heavily for a personal project (worked great, thanks again) and would like to share my work with other developers. I have added the phrase "Code was adapted from http://bl.ocks.org/mbostock/4339083" to the readme. Ideally I would like to assign a license to this project (MIT preferred). If not possible, I would be happy to add your standard copyright snippet to the js file. Any input would be much appreciated.
thanks,
nate