【トラブル】【C3.js】Y軸のラベルが浮動小数点の誤差で表示がおかしくなる

トラブル/その他Web系

■現象

 * Firefox/Chromeにおいて、C3.jsのY軸のラベルが浮動小数点の誤差で表示がおかしくなる

サンプル

現象発生時 
<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>

</head>
<body>
<div id="chartToDrow"></div>
<script>
var chart = c3.generate({
  bindto: '#chartToDrow',
  data: {
    x: 'x',
    columns: [
    ['x', 'Mike', 'Tom', 'Kevin', 'Sam', 'Ken'],
      ['score', -0.0002, -0.0002, -0.0002, -0.0002, -0.0003],
    ],
    type: 'bar',
  },
  grid: {
    y: {
      lines: [{value:0}],
    }
  },
  axis: {
    x: {
      type: 'category',
      tick: {
        multiline: false,
        rotate: 75,
      },
      height: 130
    },

  },
});
</script>
</body>
</html>
現象発生時:出力結果(Y軸) / Firefox・Chrome 
-3.552713678800501e-20

-0.000050000000000000036

-0.00010000000000000003

-0.00015000000000000004

-0.00020000000000000004

-0.00025000000000000006

-0.00030000000000000003
現象発生時:出力結果(Y軸) / IE11 
-3.5527136788005e-20

-0.00005

-0.0001

-0.00015

-0.0002

-0.00025

-0.0003

■解決方法

解決策１

 * axis.y.tick.values を指定する
http://stackoverflow.com/questions/32447077/how-to-format-the-values-of-c3-js-y-axis

解決策２

http://stackoverflow.com/questions/32457291/how-to-format-number-in-d3-js-c3-js
 * 以下のメソッドを使い、桁数を丸めてあげる

 * axis.y.tick.formatとd3.format(",.Xf") (X:数字)
   又は
 * Number.toFixed(X) (X:数字)
～～～～～
    y: {
      tick: {
         format: function (d) {
            return d3.format(",.6f")(d);
         }
      },
    },
～～～～～

■サンプル

* 解決策２ 
<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>

</head>
<body>
<div id="chartToDrow"></div>
<script>
var chart = c3.generate({
  bindto: '#chartToDrow',
  data: {
    x: 'x',
    columns: [
    ['x', 'Mike', 'Tom', 'Kevin', 'Sam', 'Ken'],
      ['score', -0.0002, -0.0002, -0.0002, -0.0002, -0.0003],
    ],
    type: 'bar',
  },
  grid: {
    y: {
      lines: [{value:0}],
    }
  },
  axis: {
    x: {
      type: 'category',
      tick: {
        multiline: false,
        rotate: 75,
      },
      height: 130
    },
    y: {
      tick: {
         format: function (d) {
            var numValue = new Number(d);
            var val = numValue.toFixed(6);
            if (val == 0) {
               return 0;
            } else {
               return val;
            }
         }
      },
    },
  },
});
</script>
</body>
</html>
修正後:出力結果(Y軸) 
0

-0.000050

-0.000100

-0.000150

-0.000200

-0.000250

-0.000300

■注意

 * 丸め方(以下のXの値)に気を付けないと同じ値になる可能性もある

例

var val = numValue.toFixed(4);
にしたら、以下のように同じ値になる
～～～～～
0

-0.0001

-0.0001

-0.0002

-0.0002

-0.0003

-0.0003
～～～～～

関連記事

浮動小数点と誤差

http://blogs.yahoo.co.jp/dk521123/35833686.html