javascript - 如何在 Rob Flaherty 的美国 map 示例中缩放 Raphael map ？

Question

我正在尝试实现 this awesome map ，但我不知道如何缩放它。更改容器 div 的大小或高度/宽度值只会裁剪底层 map 。我想我需要 paper.scaleAll(.5) 在这里的某个地方，但无法弄清楚。谢谢!

    <script>
  window.onload = function () {
    var R = Raphael("container", 1000, 900),
      attr = {
      "fill": "#d3d3d3",
      "stroke": "#fff",
      "stroke-opacity": "1",
      "stroke-linejoin": "round",
      "stroke-miterlimit": "4",
      "stroke-width": "0.75",
      "stroke-dasharray": "none"
    },
    usRaphael = {};

    //Draw Map and store Raphael paths
    for (var state in usMap) {
      usRaphael[state] = R.path(usMap[state]).attr(attr);
    }

    //Do Work on Map
    for (var state in usRaphael) {
      usRaphael[state].color = Raphael.getColor();

      (function (st, state) {

        st[0].style.cursor = "pointer";

        st[0].onmouseover = function () {
          st.animate({fill: st.color}, 500);
          st.toFront();
          R.safari();
        };

        st[0].onmouseout = function () {
          st.animate({fill: "#d3d3d3"}, 500);
          st.toFront();
          R.safari();
        };

      })(usRaphael[state], state);
    }

  };
</script>

Answer 1

另一个答案几乎是正确的，但你必须将缩放命令的 anchor 设置为 0,0，以便每个状态都从同一点缩放:

element.transform("s2,2 0,0");

当你这样做的时候，我会制作一个 R.set() 元素并将每个状态添加到它，这样你就可以在你添加其他对象的情况下将比例应用于状态，比如图例，您不想缩放:

usRaphael = {},
states = R.set();

//Draw Map and store Raphael paths
for (var state in usMap) {
  usRaphael[state] = R.path(usMap[state]).attr(attr);
  states.push(usRaphael[state]);
}

然后在最后:

states.transform("s2,2 0,0");

jsFiddle