d3.js(8)

6follower
harada さんのアバター 49views

D3.jsで、X軸の項目が表示幅より長い場合は斜めに表示する

translate(" + this.getBBox().height/2*-1 + "," + this.getBBox().height + ")rotate(-45)で斜めにすることができます。 たとえば以下のように記述します。 ... 2017年6月22日
harada さんのアバター 74views

D3.jsを利用したSVGにテキストを3つ並べる

表示サンプルはこちら HTML <script src="http://d3js.org/d3.v3.min.js"></script> <div id="text"> </div> ... 2017年6月8日
harada さんのアバター 18views

SVGの要素で指定できるタグのメモ

メモしておきます。 指定する要素によっては使えないこともあるかもしれません。 .attr("text-anchor", "middle")//テキストの表示位置(start,middle,end) .attr("fill", '#fff'... 2017年6月7日
ysugiyama12 さんのアバター 217views

d3.js でx軸のラベルを文字列にする

通常はラベルの数値を元に範囲を取得して均等に表示する処理をしているが、それをせずにデータ数に応じて均等に配置する。 いじる部分だけピックアップ var xScale = d3.scale .ordinal() ... 2017年5月24日
harada さんのアバター 82views

D3.js:指定した範囲でrect要素を切り抜く

以下のように切り抜きたい範囲を指定して、要素に指定することで指定した範囲でrect要素を切り抜けるようです。 //切り抜く範囲を指定 svg.append("clipPath") .attr("id", "clip-rect"... 2017年5月1日
harada さんのアバター 78views

D3.jsのグラフを角丸にする(ドーナツグラフの場合)

角丸にしたいドーナツグラフのd3.svg.arc()などの後ろに以下を追加するだけで角丸にできるようです。 .cornerRadius(20) 追加例: var arc_simple = d3.svg.arc() .in... 2017年4月28日
harada さんのアバター 60views

D3.jsのグラフを角丸にする

角丸にしたい棒グラフなどの.append("rect")がかいてあるところに.attr("rx", 4)と.attr("ry", 4)を追加するだけで実現するようです。 .attr("rx", 4) .attr("ry",... 2017年4月11日
harada さんのアバター 603views

D3.jsを使ってラベル付きの円グラフを作成する

D3.jsを使うとさまざまなグラフがかけるようです。 さまざまなグラフ例:https://github.com/d3/d3/wiki/Gallery 試しにPie charts labelsをもとに以下のサンプルグラフを作成してみました。... 2017年4月5日