CSS
JavaScript
d3.js
style
datamaps

DataMaps - 装飾をstylesheetで実現

More than 1 year has passed since last update.


DataMapsの装飾をstylesheetで実現する

SVGでいい感じの地図を実現してくれる、d3.jsを使ったjavascriptのライブラリ

DataMaps

DataMapsの見本画像

すごくいいライブラリなのだけど、国や半円や円の領域を、javascriptで直接エレメントのstyleを指定しているので、stylesheetで装飾できなかった。

(一部の要素の装飾はjavascriptでstyleタグを出力している様子)

そこで、javascript内のstyleを直接指定している箇所を置換して、stylesheetで装飾できるようにしてみた。

対象のプロパティ


  1. fill

  2. fill-opacity

  3. stroke

  4. stroke-width

  5. stroke-opacity

  6. stroke-linecap

  7. opacity

  8. font-size

  9. font-family

こいつらを

.style("fill"

から

.style("fill_"

に置換してやればOK

ちなみにstylesheetで指定する際のSVG内の各要素のセレクタはこんな感じ

要素
セレクタ

国の領域
path.datamaps-subunit

半円
path.datamaps-arc


circle.datamaps-bubble

{fillKey}
[data-info*={fillKey}]

{fillKey}:fillKeyで指定した文字列