配列要素をシャッフル（ランダムに並べ替える）する (shuffle)

説明

D3.jsで配列要素をシャッフル（ランダムに並べ替える）するにはd3.shuffle()メソッドを使います。パラメーターには配列を指定します。このshuffle()メソッドは非破壊ではありません。つまりパラメーターで指定した配列の要素は変更され（破壊され）た状態になります。このため、元の配列を破壊されては困る場合は、あらかじめコピーしておくなどの処理が必要になります。また、shuffle()の戻り値もシャッフルされた配列を返します。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="result1"></div>
<div id="result2"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

var list = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
d3.select("#result1").html("処理前："+list);
d3.shuffle(list);
d3.select("#result2").html("処理後："+list);