- ホーム /
- d3.js
D3.jsで、X軸の項目が表示幅より長い場合は斜めに表示する
translate(” + this.getBBox().height/2*-1 + “,” + this.getBBox().height + “)rotate(-45)で斜めにすることができます。 たとえば以下のよう… - harada
- ハック
- 2017.06.22
- 1,888
D3.jsを利用したSVGにテキストを3つ並べる
表示サンプルはこちら HTML <script src=”http://d3js.org/d3.v3.min.js”></script> <div id=”text”> </di… - harada
- ハック
- 2017.06.08
- 2,296
SVGの要素で指定できるタグのメモ
メモしておきます。 指定する要素によっては使えないこともあるかもしれません。 .attr(“text-anchor”, “middle”)//テキストの表示位置（start,middle,end) .attr(“fill… d3.js でx軸のラベルを文字列にする
通常はラベルの数値を元に範囲を取得して均等に表示する処理をしているが、それをせずにデータ数に応じて均等に配置する。 いじる部分だけピックアップ var xScale = d3.scale .ordinal() .doma… - ysugiyama12
- ハック
- 2017.05.24
- 1,967
D3.js：指定した範囲でrect要素を切り抜く
以下のように切り抜きたい範囲を指定して、要素に指定することで指定した範囲でrect要素を切り抜けるようです。 //切り抜く範囲を指定 svg.append(“clipPath”) .attr(“id”, “clip-re… - harada
- ハック
- 2017.05.01
- 2,173
D3.jsのグラフを角丸にする（ドーナツグラフの場合）
角丸にしたいドーナツグラフのd3.svg.arc()などの後ろに以下を追加するだけで角丸にできるようです。 .cornerRadius(20) 追加例： var arc_simple = d3.svg.arc() .in… D3.jsのグラフを角丸にする
角丸にしたい棒グラフなどの.append(“rect”)がかいてあるところに.attr(“rx”, 4)と.attr(“ry”, 4)を追加するだけで実現するようです。 .attr(“rx”, 4) .attr(“ry”… D3.jsを使ってラベル付きの円グラフを作成する
D3.jsを使うとさまざまなグラフがかけるようです。 さまざまなグラフ例：https://github.com/d3/d3/wiki/Gallery 試しにPie charts labelsをもとに以下のサンプルグラフを… - harada
- ハック
- 2017.04.05
- 1,352
