如何在 D3 v4 中只获取我需要的东西？答案

【问题标题】：How do I grab only the things I need in D3 v4?如何在 D3 v4 中只获取我需要的东西？
【发布时间】：2016-10-28 12:21:38
【问题描述】：

我想构建 like this 的东西，同时只从 D3s 现在的模块化库中获取绝对的minimum。

所以查看该代码，我可以看到我需要以下内容（如果我错了，请纠正我）：

d3-time-format 中的 d3.timeParse
d3.scaleTime in d3-scale
d3.scaleLinear in d3-scale
d3.line d3 形状
d3.select in d3-selection
d3-request 中的 d3.csv
d3-array 中的 d3.extent
d3-array 中的 d3.max
d3 轴中的 d3.axisBottom
d3.axisLeft 在 d3 轴

然后我找到了 Mike 自己的 this tutorial，了解如何进行捆绑。

我可以让它工作，但 Mike 抓取的东西都来自同一个模块 d3-selection

当我想将各种模块中的所有模块（如我的情况）捆绑为一个时，我该怎么办？我仍然对 JS 模块感兴趣！我以前没有使用过这些，但我不会学习，直到我潜入并用它做点什么。

【问题讨论】：

标签： javascript node.js d3.js module

【解决方案1】：

通过 npm 将模块（d3-array 等）声明为项目中的依赖项：

npm install --save-dev d3-time-format d3-scale d3-shape d3-selection d3-request d3-array d3-axis

您的 package.json 文件现在应该有一个如下所示的 devDependencies 部分

"devDependencies": {
    "d3-array": "1.0.1",
    "d3-axis": "1.0.3",
    "d3-request": "1.0.2",
    "d3-scale": "1.0.3",
    "d3-selection": "1.0.2",
    "d3-shape": "1.0.3",
    "d3-time-format": "2.0.2",
    "rollup": "0.36",
    "rollup-plugin-node-resolve": "2",
    "uglify-js": "2"
}

在您的index.js 文件中添加相关的exports：

export {
    event,
    select,
    selectAll
} from "d3-selection";

export {
    timeParse
} from "d3-time-format";

export {
    scaleTime,
    scaleLinear
} from "d3-scale";

export {
    line
} from "d3-shape";

export {
    csv
} from "d3-request";

export {
    extent,
    max
} from "d3-array";

export {
    axisBottom,
    axisLeft
} from "d3-axis";

运行汇总命令

rollup -c && uglifyjs d3.js -c -m -o d3.min.js

您现在有一个可用的d3.max 函数（修改为index.htm）：

var y = d3.max([2016, 2017]);
d3.select("body").append("h1").text("Hello, " + y);

【讨论】：