DataMapsの装飾をstylesheetで実現する
SVGでいい感じの地図を実現してくれる、d3.jsを使ったjavascriptのライブラリ
DataMaps
すごくいいライブラリなのだけど、国や半円や円の領域を、javascriptで直接エレメントのstyleを指定しているので、stylesheetで装飾できなかった。
(一部の要素の装飾はjavascriptでstyleタグを出力している様子)
そこで、javascript内のstyleを直接指定している箇所を置換して、stylesheetで装飾できるようにしてみた。
対象のプロパティ
- fill
- fill-opacity
- stroke
- stroke-width
- stroke-opacity
- stroke-linecap
- opacity
- font-size
- font-family
こいつらを
.style("fill"
から
.style("fill_"
に置換してやればOK
ちなみにstylesheetで指定する際のSVG内の各要素のセレクタはこんな感じ
要素 | セレクタ |
---|---|
国の領域 | path.datamaps-subunit |
半円 | path.datamaps-arc |
円 | circle.datamaps-bubble |
{fillKey} | [data-info*={fillKey}] |
{fillKey}:fillKeyで指定した文字列