Pop Out SVG US State Feature Path On Click - reactjs

Question

I'm rendering a geoAlbersUSA SVG map using d3-geo and topojson-client - as shown below - but I'm trying to do something fancy when a user clicks on the path. I would like to scale and translate the underlying path, in this case Idaho or Virginia, so that the state "floats" above the United States, but is still centered on the centroid. Every time I try to simply scale the <path/> element it ends up many pixels away; is there a way to calculate a translate() that corresponds to how much you have scaled the element?
const states = topojson.feature(us, us.objects.states as GeometryObject) as ExtendedFeatureCollection;
const path = geoPath()
.projection(geoAlbersUsa()
.fitSize([innerWidth as number, innerHeight as number], states)
);
<svg>
{
states.features.map(feature => {
return <path key={`state-path-${feature.id}`} d={path(feature) as string} onClick={() => updateScaleAndTranslate(feature)} />
}
}
</svg>

Answer 1

You need to set the transform-origin style property. It determines the point relative to which the transformations are applied. If you can find the centre of the path (for example, using getBBox()), and then set
.style("transform-origin", `${myCenter.x}px ${myCenter.y}px`)
This should change the way the transform is being applied.
I made a small example for you, using d3 v6. Note that as states are "expanded" they might now start to overlap, so functionally, I'd recommend to allow only one or a few states to be expanded like that.
const svg = d3.select('body')
.append("svg")
.attr("viewBox", [0, 0, 975, 610]);
d3.json("https://cdn.jsdelivr.net/npm/us-atlas#3/states-albers-10m.json").then((us) => {
const path = d3.geoPath()
const color = d3.scaleQuantize([1, 10], d3.schemeBlues[9]);
const statesContainer = svg.append("g");
const states = statesContainer
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("class", "state")
.attr("fill", () => color(Math.random() * 10))
.attr("d", path)
.on("click", function(event, d) {
const {
x,
y,
width,
height
} = this.getBBox();
// First, move the state to the front so it's in front of others
const state = d3.select(this)
.attr("transform-origin", `${x + width / 2}px ${y + height / 2}px`).remove();
statesContainer.append(() => state.node());
d.properties.expanded = !d.properties.expanded;
state
.transition()
.duration(500)
.attr("transform", d.properties.expanded ? "scale(1.25)" : "scale(1)")
});
states
.append("title")
.text(d => d.properties.name)
});
.state {
stroke: #fff;
stroke-linejoin: round;
stroke-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
<script src="https://d3js.org/topojson.v3.js"></script>