d3 v4插件--如何要求其他d3插件？

Question

我试图建立一个d3 v4插件跟随https://bost.ocks.org/mike/d3-plugin/ -最终目标是能够安装插件，并使用它的角度2/4组件。

我的回购官来了：

https://github.com/denisemauldin/d3-timeline

示例：

https://denisemauldin.github.io/d3-timeline/examples/example.html

我遇到了一些问题，试图包含其他d3需求。上面没有包含如何使用其他d3组件的示例。我需要使用d3.timeFormat，d3.timeHour，d3.scaleOrdinal，d3.schemeCategory，d3.mouse，d3.select，d3.axisTop，d3.axisBottom和d3.scaleLinear。

这些来自d3-axis，d3-scale，d3-selection，d3-time和d3-time-format。我尝试过几种不同的方法：

( 1)将它们作为导入包含在index.js中

 import "d3-axis";
 import "d3-scale";
 import "d3-selection";
 import "d3-time";
 import "d3-time-format";
 export {default as timeline} from "./src/timeline";

2)将其包含在timeline.js源中：

var d3 = Object.assign({}, require("d3-axis"), require("d3-scale"), require("d3-selection"), require("d3-time"), require("d3-time-format"));
(function() {
    d3.timeline = function() {
                //variable definitions
                function timeline (gParent) {};
                //method definitions
                return timeline;
        };
})();
export default d3.timeline;

现在它在浏览器中加载并运行良好，但是我不知道如何使npm安装工作，这样我就可以构建一个npm包以供我的Angular2站点使用。

我在rollup-plugin-commonjs中尝试了许多不同的rollup-plugin-commonjs选项。我不确定这是我想要的方式，因为它似乎产生了一个包文件，其中包含了我所需要的所有d3代码。现在，汇总调用(包含在d3插件初学者包中)失败了：

rm -rf build && mkdir build && rollup -c -f umd -n d3 -o build/d3-timeline.js -- index.js

'default' is not exported by 'd3-timeline/src/timeline.js' (imported by 'd3-timeline/index.js')

如果我删除了我的rollup.config.js，那么它会给出同样的错误，但也会说：

Treating 'd3-axis' as external dependency
Treating 'd3-scale' as external dependency
Treating 'd3-selection' as external dependency
Treating 'd3-time' as external dependency
Treating 'd3-time-format' as external dependency

那么，我如何更新src/timeline.js文件以导出默认值，以便我可以将它与npm install d3-timeline一起使用，以便在browser中使用，也可以在浏览器中使用？或者，如何配置汇总以使当前的src/timeline.js文件正常工作？

谢谢!

Answer 1

我认为问题的一部分是您应该在d3文件中导入src/timeline.js依赖项，而不是在rollup.config.js文件中。

您还需要从src/timeline.js文件导出时间线函数，而不是将其封装在IIFE中。

例如：

// src/timeline.js
import { axisBottom, axisTop } from 'd3-axis';
import { timeFormat } from 'd3-time-format';
import { timeHour } from 'd3-time';
import { scaleOrdinal, scaleLinear, schemeCategory20 } from 'd3-scale';
import { select } from 'd3-selection';

export default function timeline() {
  // your code here...
}

那么您的index.js文件将只包含：

export { default as timeline } from "./src/timeline";

然后，在package.json文件中，需要将要导入的d3模块指定为依赖项：

// in package.json
dependencies: {
  "d3-axis": "^1.0.0",
  "d3-time-format": "^2.0.0",
  "d3-time": "^1.0.0",
  "d3-scale": "^1.0.0",
  "d3-selection": "1.0.0"
}

作为参考，您可以查看其他d3插件是如何配置的，例如吕素茜插件d3.legend。

Answer 2

在@clhenrick的慷慨帮助下，我得到了这份工作。我确实更新了我的index.js文件，使其只包含timeline导出。

我不得不将src/timeline.js更新为：

import * as d3 from 'd3';

var timeline = function() { <code> };
export default timeline;

如果我试图单独导入d3包(d3-axis、d3-selection等)，那么d3-axis事件将得到d3.mouse(this)调用的Cannot read property 'sourceEvent' of null错误。

我不得不将我的rollup.config.js更新为：

import nodeResolve from 'rollup-plugin-node-resolve';

let pkg = require("./package.json");
let external = Object.keys(pkg.peerDependencies);

export default {
    entry: 'index.js',
    dest: 'bundle.js',
    format: 'umd',
    moduleName: 'd3-timeline',
    external: external,
    plugins: [nodeResolve({ jsnext: true, main: true})]
};

在运行npm install时，这将创建一个可以在浏览器中加载的umd模块，并将peerDependencies部分(其中包含d3)从package.json加载为外部依赖项(这意味着它们不会绑定到我的d3-timeline.js中)。

然后，我将d3-timeline.js从build目录复制到dist目录中，以便在示例HTML文件中使用，因为src/timeline.js不再是浏览器可以直接使用的格式。