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

Question

我正在尝试按照 https://bost.ocks.org/mike/d3-plugin/ 构建一个 d3 v4 插件 - 最终目标是能够 npm 安装插件并在 Angular 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.config.js 选项。我不确定这是我想要的方式，因为它似乎生成了一个包含我需要的所有 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 一起用于 Angular，并且还可以用于浏览器？或者，如何配置汇总以使当前 src/timeline.js 文件工作？

谢谢！

Answer 1

我认为部分问题在于您应该在 src/timeline.js 文件中导入 d3 依赖项，而不是在 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 插件的配置方式，例如 Susie Lu's plugin 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 等），那么我的 on("click") 事件会出现 Cannot read property 'sourceEvent' of null 错误 d3.mouse(this)打电话。

我必须将 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})]
};

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

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

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

d3 v4 plugin - How to require other d3 plugins?

npm

d3.js

typescript

rollupjs

angular