最好的方式來服務/生產美國國家silhoutte？

我負責提供頁面以顯示美國州立州選舉的主要結果。每個頁面都需要一張帶有國家圖像的橫幅，大約250px x 250px。現在我需要做的是找出如何服務/生成的圖像...最好的方式來服務/生產美國國家silhoutte？

我已經挖成的文檔/爲Protovis例子，認爲我大概可以提升國家協調outlines-我將不得不手動變換的座標數據是合理的和尺寸正確（ICK）
在聰明/蠻力譜的另一端是一個巨大的精靈或一系列子畫面的。即使使用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(); 
};

來源

2012-01-04 RSG

你是指'手動變換'（1）中的座標數據是什麼意思？這需要如何兼容（canvas！= IE6 ...）？ – 2012-02-09 14:49:40

我有道德上的反對意見，爲IE6兼容性編寫代碼，幸好這不是要求。 – RSG 2012-02-09 20:29:51

d3似乎要做的能力映射類似於你想要的東西。該示例顯示了縣和州，因此您只需省略縣，然後以正確的格式提供選舉結果。

來源

2012-01-04 10:09:38

我不清楚你如何從這個鏈接做到這一點。有沒有例子？ – RSG 2012-01-04 17:31:25

您可以過濾一個狀態的us-states.json文件。你也可以刪除與us-counties.json相關的邏輯。 – Beau 2012-01-19 22:41:47

這可能是正確的答案。我們還沒有準備好從protovis轉換到d3，但是寫作仍在牆上。 – RSG 2012-02-09 20:23:16

在50states.com有一組地圖，例如，大約5KB的http://www.50states.com/maps/alabama.htm。粗略地說，那整個集合就是250KB。既然你提到分開使用這些，你的答案就是這樣。

或者你是否在做更多的事情而不僅僅是展示輪廓？

來源

2012-02-09 15:21:36

最好的方式來服務/生產美國國家silhoutte？

回答

相關問題