私の現在のプロジェクトは、米国のヒート マップです。
http://up.massrelevance.com/cnbc/top-states/heatmap.html
各状態は独自の Raphael オブジェクトであり、当面の間、各状態に 2px の白いストロークを使用してその境界を表しています。
ただし、各状態の間に均一なギャップがあり、背後にドロップ シャドウがあるコンプを一致させようとしています。
視覚的な観点から、影が透けて見えるように、マップの白い線を透明/空のスペースに変更する必要があります。
これを達成するための比較的簡単な方法はありますか？これまでの私の考え：
- ロングショットの願いですが、存在する場合は、ある種の「負の」ストロークを使用します。透明なストロークは単に見えませんが、その下のパス/ストローク/塗りつぶしを「カットスルー」して背景を明らかにするストロークは簡単な修正です。
- ストロークを削除
transformし、メソッドでラファエルのプロパティを使用して、.attr()各状態を少量 (たとえば 5%) 縮小します。私はこれを試してみましたが、かなりうまくいきましたが、状態は対称的ではないため、通常は理想的ではない中心点に基づいてスケーリングされます (多くの状態は中心からずれており、互いにわずかに重なり合っています)。その中心点は変更できますが、多数の状態に対して非常に面倒な試行錯誤が必要になります。 - ドロップ シャドウの色と一致する線の色を使用して、状態間のギャップをシミュレートします。これは十分に近いですが、北部/西部の州の上部と左側の周りの影色のストロークは見逃せません.
ヒント、アイデア、または提案をいただければ幸いです。ありがとう！