おまじないの綴り方

spelling of a logical spell

d3.jsで書いたグラフの軸を反転させるサンプル

目標

d3.jsで作成した散布図のy軸を反転させたい f:id:miyatsuki_yatsuki:20170307010526p:plain

まとめ

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>