*

文字を描画する

公開日: : 最終更新日:2016/01/24 D3.js ,

SVGで文字を表示するにはtext要素を使います。<text>とと</text>の
間に表示する文字列を書きます。ただ、このままでは文字は表示
されません。文字を表示するには、文字の色(又はは線の色)を指定
しなかればなりません。

サンプルコードの実行結果はこちら

フォントや文字の大きさ、太さを指定する

text要素には、書体やサイズを指定することができます。
主なものは下記の通りです。値・内容はCSSと同じです。

属性 説明
font-family 書体
font-size 文字サイズ
font-weight 太字の太さ

文字の表示基準位置を変更する

text要素には文字の表示基準位置を指定するtext-anchor属性があります。
これは文字の左揃え、中央、右揃えを指定するものです。
text-anchorの属性値は下記の通りです。

属性値 説明
start 左揃え
middle 中央
end 右揃え

スポンサードリンク

関連記事

D3.js

パックレイアウトの生成

パックレイアウトは階層(親子)関係を利用してチャートを表すものです。D3.jsではパックレイアウトは

記事を読む

D3.js

フォースレイアウト

D3.jsでは、フォースレイアウトを作成する機能も用意されています。フォースレイアウトは予めノードと

記事を読む

D3.js

散布図にグリッドを表示してみる

目盛りの表示は何度もしました。散布図でも縦軸、横軸を表示しました。 今回は、グリッド(マス目)を表

記事を読む

D3.js

JSONみたいなデータを読み込んでグラフにする

まずは、サンプルコードの実行結果はこちら [crayon-5ed492fce

記事を読む

D3.js

D3.js サーバーのログを読み込んで、OSのシェアを表示してみる

D3.jsを利用して、サーバーログを読出して、情報を得ることができます。 サンプルコードの実行

記事を読む

D3.js

折れ線グラフを曲線、直線、階段状に表示する

D3.jsでは折れ線グラフを直線で表示するのではなく、曲線、階段状に表示することもできます。D3.j

記事を読む

D3.js

HTML形式とXML形式ファイルを読み込む

HTMLファイルを読み込む D3.jsではHTMLファイルを読み込むこともできます。 データは、

記事を読む

D3.js

ヒートマップをCanvasに表示する

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位で

記事を読む

D3.js

マウスイベントでグラフの色を変更する

前回のまでの記事で、HTML上にあるボタンをクリックして グラフを変化させました。D3.jsではS

記事を読む

D3.js

縦棒グラフにアニメーションを付ける

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.js

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑