d3.jsで書いたグラフの軸を反転させるサンプル
目標
d3.jsで作成した散布図のy軸を反転させたい
まとめ
domain()の指定を逆にする
環境
d3.js 4.6.0
関連ページ
そもそもd3.jsでグラフを出す方法(棒グラフ) spell-spell.hatenablog.com
コード
<html> <head> <script type="text/javascript" src="d3.js"></script> </head> <body> <!-- グラフを描画するためのsvg要素を作っておく --> <svg id="scatter" width="500" height="500"></svg> <script type="text/javascript"> //グラフのサイズを指定 var width = 500 var height = 500 var dataSet = []; //グラフの各軸の値を設定 for (var i = 0; i < 10; i++) { dataSet.push({"x": Math.random(), "y": Math.random()}) } //文字が切れないようにマージンを指定 var margin = 40 //x軸に対してdomain[0, 1]で左が小さくなる //marginの範囲内に収まるようにrangeRoundで調節 var x = d3.scaleLinear().domain([0, 1]).rangeRound([0, width-margin*2]); //y軸に対してdomain[1, 0]で下が小さくなる //marginの範囲内に収まるようにrangeRoundで調節 var y = d3.scaleLinear().domain([1, 0]).rangeRound([0, height-margin*2]); //描画したいSVG要素を取得 var element = document.getElementById("scatter") //散布図の○を生成する d3.select(element).selectAll("circle") .data(dataSet) .enter() .append("circle") //散布図の○を適切な位置に置く d3.select(element).selectAll("circle") .attr("class", "data") .attr("cx", function(d){return x(d["x"]) + margin}) .attr("cy", function(d){return y(d["y"]) + margin}) .attr("r", function(d){return 5}) .attr("fill", "#6fbadd") //x軸を作る d3.select(element).append("g") .attr("class", "axis axis--x") .attr("transform", "translate(" + margin + "," + (height-margin) + ")") .call(d3.axisBottom(x)); //y軸を作る d3.select(element).append("g") .attr("class", "axis axis--y") .attr("transform", "translate(" + margin + "," + margin + ")") .call(d3.axisLeft(y)); </script> </body> </html>