Question

我想构建一些like this，同时只抓取D3现在模块化库中所需的绝对最小。

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

d3.timeParse d3-time-format
d3.scaleTime d3-scale
d3.scaleLinear d3-scale
d3.line in d3-shape
d3.select in d3-selection
d3.csv在 d3-request
d3.extent in d3-array
d3.max in d3-array
d3.axisBottom在 d3-axis
d3.axisLeft d3-axis

然后我发现迈克自己this tutorial如何进行捆绑。

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

当我想将各种模块中的所有模块捆绑到一个模块中时，我该怎么办？我仍然围绕着JS模块！我之前没有使用过这些，但在我深入研究并做一些事情之前，我不会学习。

Answer 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);

我如何只抓住D3 v4中我需要的东西？

1 个答案: