d3.js入门教程3-d3.js中的数据操作

数学操作

d3.max和d3.min就是获取数据每一列的最大值和最小值的函数，示例代码如下

    <!-- 加载d3 --><script src="https://d3js.org/d3.v4.js"></script><script>var data = [[1,2,3],[4,5,6]];// 获取最大值var max_value = d3.max(data);// 获取第一列元素最小值var min_value = d3.min(data, function(d) { return d[0]});console.log(max_value); // 输出4,5,6console.log(min_value); // 输出1</script>

对象和数组

JavaScript的objects对象是被命名值的容器。我们可以用对象元素的名字来调用对象的任何元素，或者调用函数操作任何对象数值。

    <!-- 加载d3 --><script src="https://d3js.org/d3.v4.js"></script><script>// 1 调用元素var myObject = { name: "Nicolas", sex: "Male", age: 34 };console.log(myObject.name); // 输出Nicolasconsole.log(myObject["sex"]); // 输出Male// 2 数组操作var myArray = [12, 34, 23, 12, 89]console.log(myArray[2]) // 输出23console.log(myArray[myArray.length - 1]) // 输出最后一个数值89myArray.pop(); // 删除数组的最后一个元素console.log(myArray[myArray.length - 1]) // 输出最后一个数值12myArray.push(34) // 数组末尾添加一个元素console.log(myArray[myArray.length - 1]) // 输出最后一个数值34console.log(myArray.indexOf(34)) // 输出数值34第一次出现的位置</script>

过滤Filtering

d3中的数据过滤方法和常用计算机语言一样

    <!-- 加载d3 --><script src="https://d3js.org/d3.v4.js"></script><script>var data = ["first", "second", "third", "fourth", "first"]var result = data.filter(function (d) { return d == "first" }) // 返回包含first的数组 console.log(result) // 输出["first","first"]result = data.filter(function (d) { return d != "first" }) // 返回不包含first的数组 console.log(result) // 输出["second", "third", "fourth"]result = data.filter(function (d) { return ["first", "third"].includes(d) }) // 返回包含first和third的数组 console.log(result) // 输出["first","third", "first"]result = data.filter(function (d) { return !["first", "third"].includes(d) }) // 返回不包含first和third的数组 console.log(result) // 输出["second","fourth"]var tokeep = ["1", "second", "3"] // 另外一种方法过滤result = data.filter(function (d) { return tokeep.indexOf(d) >= 0 }) // 返回包含second的数组console.log(result) // 输出["second"]result = data.filter(function (d, i) { return i < 2 }) // 返回包含data前两个元素的数组console.log(result) // 输出["first","second"]</script>

排序Sorting

d3中的数据排序方法和常用计算机语言一样

    <!-- 加载d3 --><script src="https://d3js.org/d3.v4.js"></script><script>var data = [0, 3, 2, 4, 1, 2];var result1 = [0, 3, 2, 4, 1, 2].sort(function (a, b) { return a - b }) // 对data从小到大排序console.log(result1) // 输出 [0,1,2,2,3,4]var result2 = data.sort(function (a, b) { return b - a }) // 对data从大到小排序console.log(result2) // 输出 [4,3,2,2,1]var result3 = data.sort(function (a, b) { return d3.ascending(a, b) }) // 对data从小到大排序console.log(result3) // 输出 [0,1,2,2,3,4]var result4 = data.sort(function (a, b) { return d3.descending(a, b) }) // 对data从大到小排序console.log(result4) // 输出 [4,3,2,2,1]dataset = [{ 'name': "first", 'value': 1 },{ 'name': "third", 'value': 3 },{ 'name': "first", 'value': 10 },{ 'name': "second", 'value': 2 },]// 根据dataset中name属性对dataset排序var result5 = dataset.sort(function (a, b) { return d3.ascending(a.name, b.name); });console.log(result5)// 根据dataset中value属性对dataset排序var result6 = dataset.sort(function (a, b) { return a.value - b.value })console.log(result6)</script>

映射group

d3.map可以不改变原数组的情况下创建一个新的数组

<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script><script>data = [{ 'name': "first", 'value': 1 },{ 'name': "third", 'value': 3 },{ 'name': "first", 'value': 10 },{ 'name': "second", 'value': 2 },]var allGroup = d3.map(data, function (d) { return (d.name) }) // 会去除重复元素// 输出['first','third','second']console.log(allGroup.keys()) // d3.map会自动给每个元素加上以索引为key的对象。console.log(allGroup.values()) // 输出值
</script>

循环loop

<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script><script>// for循环，输出0到9var i;for (i = 0; i < 10; i++) {console.log(i)}// 打印列表元素的索引var allGroup = ["a", "b", "c"];// 输出是0,1,2不是a,b,cfor (i in allGroup) {console.log(i)}// while循环，输出0到9i = 0;while (i < 10) {console.log(i)i++;}
</script>

重塑Reshape

有的时候我们需要将数据长表变为宽表，如下图所示。在Python中可以通过pandas中的pivot_table实现，R语言中通过tidyr实现。在js则需要自行编写代码。所以强烈建议在js之外执行数据整理步骤。

我们下面读取csv的数据如下图所示。

    <!-- 加载d3 --><script src="https://d3js.org/d3.v4.js"></script><script>d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_correlogram.csv", function (data) {// Going from wide to long formatvar data_long = [];// 提取每一行数据data.forEach(function (d) {// 提取行名var x = d[""];// 删除行名delete d[""];for (prop in d) {// 提取列名var y = prop;// 提取值value = d[prop];data_long.push({x: x,y: y,value: +value});}});// 展示结果console.log(data_long)});</script>

堆叠Stack

有时我们需要堆叠数据（如第二行数据堆叠在原来第一行数据上展示），特别是对于条形图和面积图，可以通过d3.stack()实现。但是还是推荐数据处理放在js之外执行。下面的代码示例步骤如下图所示。

    <!-- 加载d3 --><script src="https://d3js.org/d3.v4.js"></script><script>d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv", function (data) {// 打印数据console.log(data)// 从第一列开始提取列名var subgroups = data.columns.slice(1)// 提取每一行数据var groups = d3.map(data, function (d) { return (d.group) }).keys()// 堆叠数据var stackedData = d3.stack().keys(subgroups)(data)// 打印数据console.log(stackedData)})</script>

参考

• Data manipulation in d3.js