This example demonstrates how to scale a D3 symbol to fit inside a specified rectangular bounding box using getBBox.
forked from mbostock's block: Fitted Symbols (d3v3)
xxxxxxxxxx
<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="https://d3js.org/d3.v4.min.js"></script>
<script>
var path = d3.select("path"),
rect = d3.select("rect"),
width = +rect.attr("width"),
height = +rect.attr("height");
var symbol = d3.symbol(),
symbolIndex = -1,
symbolTypes = d3.symbols;
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>
https://d3js.org/d3.v4.min.js