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

Question

我想 build 一些东西 like this同时仅从 D3 的模块化库中获取绝对最小值。

所以查看该代码，我可以看到我需要以下内容(如果我错了请纠正我):

• d3-time-format 中的 d3.timeParse
• d3.scaleTime d3-scale
• d3.scaleLinear d3-scale
• d3.line in d3-shape
• d3.select 在 d3-selection
• d3-request 中的 d3.csv
• d3 数组中的 d3.extent
• d3 数组中的 d3.max
• d3 轴中的 d3.axisBottom
• d3 轴中的 d3.axisLeft

然后我找到了this tutorial由 Mike 亲自介绍如何进行捆绑。

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

当我想像我的情况一样将各种模块全部打包成一个时，我该怎么办？我仍然在研究 JS 模块!我以前没有使用过它们，但在我深入研究并用它做点什么之前，我不会学习。

Answer 1

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"
   }
   

2. 添加相关exports在你的 index.js 文件中:

   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";
   

3. 运行汇总命令

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

4. 您现在有一个可用的 d3.max 函数(修改过的 index.htm):

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