Question

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

我已经挖掘了Protovis的文档/示例并想到了我可能会提升国家协调大纲 - 我必须这样做手动变换坐标数据以使其对齐和调整大小正确（ick）
在聪明/蛮力谱的另一端是一个巨大的精灵或一系列的精灵。即使用png 8压缩文件大小一个由50个非重叠的250x250px sprite组成的网格是一个值得关注的问题遗憾的是，这样的文件似乎并不存在，所以我必须创建它从手。也很不愉快。

谁有更好的主意？

回答：正确的解决方案是切换到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();
 };

Answer 1

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

Answer 2

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

或者你是否正在做这件事而不只是展示大纲？

服务/制作美国各州剪影的最佳方式？

2 个答案: