2

私は、州ごとの米国選挙のプライマリ結果を表示するページを配信する責任があります。各ページには、約 250 ピクセル x 250 ピクセルの州の画像を含むバナーが必要です。今私がする必要があるのは、それらの画像を提供/生成する方法を理解することです...

  1. 私はProtovisのドキュメント/例を掘り下げましたが、おそらくState座標のアウトラインを持ち上げることができると思います-座標データを手動で変換して正当化し、適切なサイズにする必要があります(ick)

  2. 賢い/野蛮なスペクトルの対極にあるのは、巨大なスプライトまたは一連のスプライトです。png 8 圧縮を使用しても、250x250px の重複しない 50 個のスプライトのグリッドのファイル サイズが懸念されます。悲しいことに、そのようなファイルは存在しないようです。そのため、手動で作成する必要があります。不愉快でもある。

誰がより良いアイデアを持っていますか?

回答: 正しい解決策は、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

50states.com には、たとえばhttp://www.50states.com/maps/alabama.htmなどの地図のセットがあり、約 5KB です。おおよそ、それはセット全体で 250KB です。これらを別々に使用することに言及しているので、あなたの答えがあります。

それとも、アウトラインを表示するだけではありませんか?

于 2012-02-09T15:21:36.383 に答える
1

d3には、必要に応じてマップを作成する機能があるようです。この例では、郡と州の両方が示されているため、郡を省略して、選挙結果を正しい形式で提供します。

于 2012-01-04T10:09:38.250 に答える