《Getting Started with D3》填坑之旅（二）：第一章

最新推荐文章于 2021-06-19 20:04:56 发布

安冬的码畜日常

最新推荐文章于 2021-06-19 20:04:56 发布

阅读量261

点赞数

分类专栏：读书札记 Getting Started with D3 填坑之旅文章标签： d3.js

本文链接：https://blog.youkuaiyun.com/frgod/article/details/105331968

版权

读书札记同时被 2 个专栏收录

11 篇文章

订阅专栏

Getting Started with D3 填坑之旅

9 篇文章

订阅专栏

cover

Chapter 1. Introduction（入门）

第一章没有具体示例，只是交待了一些准备工作。

全书示例代码模板：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="d3.js"></script>
        <script>
            function draw(data) {
                "use strict";
                // badass visualization code goes here
            }
        </script>
    </head>
    <body>
        <script>
            d3.json("data/some_data.json", draw);
        </script>
    </body>
</html>

注意：这里的 D3 库文件是旧版的（【 v2.8.0.zip 下载】【 v5.15.1.zip 下载】）

这里出现了本书第一坑（小坑）：如果使用的新版本，调用 d3.json() 要使用 Promise 写法：

d3.json("data/some_data.json").then(draw);

此外，书中还提到了一个在用 JSON 存数据时值得借鉴的基本原则：

数据不要放在 JSON 的键上。
——Micha 黄金法则

不推荐写法：

{
	"bob": 20,
	"alice": 23,
	"drew": 30
}

推荐写法：

[
    {
        "name": "bob",
        "age": 20
    },
    {
        "name": "alice",
        "age": 23
    },
    {
        "name": "drew",
        "age": 30
    }
]

这里还提到一个方法，用于快速切换到正确的 JSON 写法：d3.entries( objJSON )，但没有给出具体示例，这里补全：

let oldData = {
	"bob": 20,
	"alice": 23,
	"drew": 30
};

let newData = d3.entries(oldData);
// [{key: "bob", value: 20},
//  {key: "alice", value: 23},
//  {key: "drew", value: 30}]

newData = newData.map(e => ({name: e.key, age: e.value}));
// [{name: "bob", age: 20},
//  {name: "alice", age: 23},
//  {name: "drew", age: 30}]

// 对比 ES6 中的 Object.entries():
let dataES6 = Object.entries(oldData);
// [["bob", 20],
//  ["alice", 23],
//  ["drew", 30]]
dataES6 = dataES6.map(e => ({name: e[0], age: e[1]}))
// (same result)