0

My question concerns this example: http://bl.ocks.org/mbostock/4699541

And this bit of code:

var b = path.bounds(d);
g.transition().duration(750).attr("transform",
  "translate(" + projection.translate() + ")"
  + "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
  + "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");

What if there were text labels on the states? How would I handle text when zooming in and out of the states? I'd want to do it in a way that would keep the label the same size and still centered on the state. Here's what I've tried:

  • Tansforming/scaling the text along with the shapes. The text basically stays in its original position; it doesn't seem to scale and tansform the same way the shapes do.
  • Putting the text and states into a group together, then applying the transform/scale on the whole group. This just makes the text scale with the state -- so on zoom in, the text becomes huge. Etc.
  • Reprojecting. It works fine but it is way too expensive.
  • Removing the text and then reapplying it after the transition. This seems to just reapply the text at the same size, because it's applying with the same projection.

Any ideas? Any notes on things I might be missing? Thanks!

Keith Collins
  • 252
  • 1
  • 3
  • 9
  • You would need to apply the translation to the `text` elements, but not the scale. – Lars Kotthoff Mar 17 '14 at 21:15
  • Yes to what @LarsKotthoff said. Or, you could apply the scaling to the entire group — including labels — as you currently do, but then "counter-scale" each text. Ie. if the scale of the all-encompassing `g` comes out to be 2.5 then each `text` within it should be scaled down to 0.4, which is 1 divided by 2.5. – meetamit Mar 17 '14 at 21:34
  • Thank you @LarsKotthoff and meetamit. Applying the transform/translate to the text without the scale doesn't work; it just moves the text way out of the scope. I guess this is because scaling everything else sort of changes the coordinate base? meetamit will try your suggestion now. Thanks! – Keith Collins Mar 17 '14 at 23:42
  • 1
    Ah yes, you would need to apply the translation with each coordinate multiplied by the scale value to get the positions right. – Lars Kotthoff Mar 18 '14 at 09:06
  • Ohhh! That is clever. Will try this afternoon. Thanks very much @LarsKotthoff – Keith Collins Mar 18 '14 at 19:04

0 Answers0