LoginSignup
1

More than 5 years have passed since last update.

DataMaps - 装飾をstylesheetで実現

Last updated at Posted at 2016-08-14

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で指定した文字列

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1