[数据与分析可视化] D3入门教程3-d3中的数据操作

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

d3.js是一个用于绘图的JavaScript库。 它可以可视化展示任何类型的数据。 这篇文章介绍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,6
        console.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); // 输出Nicolas
        console.log(myObject["sex"]); // 输出Male

        // 2 数组操作
        var myArray = [12, 34, 23, 12, 89]
        console.log(myArray[2]) // 输出23
        console.log(myArray[myArray.length - 1]) // 输出最后一个数值89
        myArray.pop(); // 删除数组的最后一个元素
        console.log(myArray[myArray.length - 1]) // 输出最后一个数值12
        myArray.push(34) // 数组末尾添加一个元素
        console.log(myArray[myArray.length - 1]) // 输出最后一个数值34
        console.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到9
    var i;
    for (i = 0; i < 10; i++) {
        console.log(i)
    }

    // 打印列表元素的索引
    var allGroup = ["a", "b", "c"];
    // 输出是0,1,2不是a,b,c
    for (i in allGroup) {
        console.log(i)
    }

    // while循环，输出0到9
    i = 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 format
            var 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