【JavaScript】D3.js ～ 配列操作 ～

Webグラフ / 地図作成ツール

■ sum

サンプル

<html>
<head>
<style>
</style>
<meta charset="UTF-8">
<!-- Load d3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
</head>
<body>
<div id="result"></div>
<script>
var dataset = [
  { yValue: 5 },
  { yValue: 2 },
  { yValue: 3 },
  { yValue: 5 },
  { yValue: 2 },
  { yValue: 3 },
  { yValue: 10 },
  { yValue: 10 },
  { yValue: 60 },
];
var sum = d3.sum(dataset, function(d) {
  return d.yValue;
});
d3.select("#result").text("Sum : " + sum);
</script>
</body>
</html>

出力結果

Sum : 100

■ max

サンプル

* 配列内の絶対値で最大なもの 
<html>
<head>
<style>
</style>
<meta charset="UTF-8">
<!-- Load d3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
</head>
<body>
<div id="result"></div>
<script>
var dataset = [
  { yValue: 23 },
  { yValue: -31 },
  { yValue: 45 },
  { yValue: 80 },
  { yValue: -120 },
  { yValue: 109 },
  { yValue: -98 },
  { yValue: 0 },
  { yValue: 65 },
];
var max = d3.max(dataset, function(d) {
  return Math.abs(d.yValue);
});
d3.select("#result").text("Max : " + max);
</script>
</body>
</html>

出力結果

Max : 120

■ map / map.get() / map.has()

サンプル

<html>
<head>
<style>
</style>
<meta charset="UTF-8">
<!-- Load d3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
</head>
<body>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
var dataset = [
  { id: "001", yValue: 23 },
  { id: "002", yValue: -31 },
  { id: "003", yValue: 45 },
  { id: "004", yValue: 80 },
  { id: "005", yValue: -120 },
  { id: "006", yValue: 109 },
  { id: "007", yValue: -98 },
  { id: "008", yValue: 0 },
  { id: "009", yValue: 65 },
];
var datasetMapper = d3.map(dataset, function(d) {
  return d.id;
});

var targetObject = datasetMapper.get("006");
d3.select("#result1").text("Result (get('006')) : " + targetObject.yValue);

var isTrue = datasetMapper.has("005");
d3.select("#result2").text("Result (has('005')) : " + isTrue);

var isFalse = datasetMapper.has("010");
d3.select("#result3").text("Result (has('010')) : " + isFalse);
</script>
</body>
</html>

出力結果

Result (get('006')) : 109

Result (has('005')) : true

Result (has('010')) : false

参考文献

http://y-uti.hatenablog.jp/entry/2014/04/05/111340
http://qiita.com/nyasu1111/items/bef2d26800748a3661ec

サンプル

max
http://www.openspc2.org/reibun/D3.js/code/array/0002/index.html

関連記事

D3.js ～ 入門編 ～

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