2

我负责提供页面以逐州显示美国选举的主要结果。每个页面都需要一个带有状态图像的横幅，大约 250 像素 x 250 像素。现在我需要做的就是弄清楚如何提供/生成这些图像......

  1. 我已经深入研究了Protovis的文档/示例，并认为我可能会提升州坐标轮廓 - 我必须手动转换坐标数据以使其合理并调整大小（ick）

  2. 在聪明/粗暴光谱的另一端是一个巨大的精灵或一系列精灵。即使使用 png 8 压缩，50 个非重叠 250x250 像素精灵的网格的文件大小也是一个问题，遗憾的是，这样的文件似乎不存在，所以我不得不手动创建它。也很不愉快。

谁有更好的主意？

回答：正确的解决方案是切换到d3。

我们现在入侵的内容：

 drawStateInBox = function(box, state, color) {
   var w = $("#" + box).width(),
           h = $("#" + box).height(),
           off_x = 0,
           off_y = 0;
           borders = us_lowres[state].borders;

   //Preserve aspect ratio
   delta_lat = pv.max(borders[0], function(b) b.lat) - pv.min(borders[0], function(b) b.lat);
   delta_lng = pv.max(borders[0], function(b) b.lng) - pv.min(borders[0], function(b) b.lng);

   if (delta_lat / h > delta_lng / w) {
     scaled_h = h;
     scaled_w = w * delta_lat / delta_lng;
     off_x = (w - scaled_w) / 2;
   } else {
     scaled_h = h * delta_lat / delta_lng;
     scaled_w = w;
     off_y = (h - scaled_h) / 2;
   }

   var scale = pv.Geo.scale()
           .domain(us_lowres[state].borders[0])
           .range({x: off_x, y: off_y},
           {x: scaled_w + off_x, y: scaled_h + off_y});


   var vis = new pv.Panel(state)
           .canvas(box)
           .width(w)
           .height(h)
           .data(borders)
           .add(pv.Line)
           .data(function(l) l)
           .left(scale.x)
           .top(scale.y)
           .fillStyle(function(d, l, c) {
             return(color);
           })
           .lineWidth(0)
           .strokeStyle(color)
           .antialias(false);

   vis.render();
 };
4

2 回答 2

1

d3似乎有能力做类似于你想要的地图。该示例显示了县和州，因此您只需省略县，然后以正确的格式提供选举结果。

于 2012-01-04T10:09:38.250 回答
1

在 50states.com 上有一组地图，例如http://www.50states.com/maps/alabama.htm，大约 5KB。那么，对于整个集合来说，大约是 250KB。既然你提到单独使用这些，那就是你的答案。

或者你在做的不仅仅是显示大纲吗？

于 2012-02-09T15:21:36.383 回答