D3.jsのグラフのタイトルにアイコンをつける

4073 ワード
d3.js JavaScript JavaScript テキストリンク

はじめに

デザイン上、D3.jsのグラフのタイトルに画像のアイコンを表示させる必要があったので、調べてみたメモ。

やり方

単にSVGのImageタグをD3の流儀に従って張り付けるだけ。
座標はうまいこと調整しよう。

// グラフタイトルのアイコン
svg.append("image")
   .attr("x", 0)
   .attr("y", 0) 
   .attr("href", "https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png")
   .attr("height",20)
   .attr("width",20)

// グラフタイトル
svg.append("text")
    .attr("x", 24)
    .attr("y", 12)
    .attr("font-size", "13px")
    .attr("text-anchor", "top")
    .attr("font-weight", 700)
    .text("タイトル");

するとこんな感じで画像がタイトルの横にアイコンっぽく表示される。当たり前っちゃー、当たり前の話だ。

参考