Svg 为美国各州提供/生产silhoutte的最佳方式？

我负责提供页面，显示美国各州选举的初步结果。每个页面都需要一个带有州图像的横幅，大约250px x 250px。现在我需要做的就是找出如何服务/生成这些图像

我已经深入研究了的文档/示例，并认为我 可能会提升州坐标轮廓-我必须 手动变换要对齐和调整大小的坐标数据 正确地（ick）

在聪明/野蛮光谱的另一端是一个巨大的精灵 或者一系列的精灵。即使使用png 8压缩，文件大小 由50个不重叠的250x250px精灵组成的网格是一个问题，并且 遗憾的是，这样的文件似乎不存在，所以我不得不创建它 从手边。也不愉快

谁有更好的主意？

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

---

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

在50states.com上有一组地图，例如，大约5KB。那么，整个场景大概需要250KB。既然你提到要单独使用这些，那就有你的答案了

---

或者，除了显示大纲之外，您还需要做更多的工作吗？

我不清楚您将如何从该链接执行此操作。有一个例子吗？您可以过滤us-states.json文件中的一个状态。您还可以删除与us-countries.json相关的逻辑。这可能是正确的答案。我们还没有准备好从protovis切换到d3，但文字还在墙上。你说的（1）中的“手动转换”坐标数据是什么意思？这需要有多大的兼容性（canvas！=IE6…）？我在道义上反对为IE6兼容性编写代码，谢天谢地，这不是一个要求。