我如何仅获取D3 v4中需要的东西?

J86

我想建立一些像这样的,而只有抓住了绝对最低的必要D3小号现在模块化磁带库。

因此,查看该代码,我可以看到我需要以下内容(如果我输入错了,请更正我):

  • d3时间格式的d3.timeParse
  • d3标度中的d3.scaleTime
  • d3.scaleLinear in d3-scale
  • d3形状的d3.line
  • d3选择中的d3.select
  • d3-request中的d3.csv
  • d3数组中的d3.extent
  • d3阵列中的d3.max
  • d3.axisD3底部
  • d3.axis沿d3轴左移

然后,我找到了Mike亲自撰写的有关如何进行捆绑的教程

我可以使它正常工作,但是Mike抓住的东西都是来自同一模块 d3-selection

当我想将各种模块捆绑成一个模块时该怎么办?我仍然对JS Modules有所了解!我以前没有使用过这些,但是直到我潜入水中并对其进行处理之前,我不会学习。

尼科斯
  1. d3-array通过npm将模块(依此类推)声明为项目中的依赖项:

    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. 文件中添加相关的导出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);
    

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章