Question

我正在尝试在https://bost.ocks.org/mike/d3-plugin/之后构建一个d3 v4插件 - 最终目标是能够安装插件并在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，{{1} }和d3.axisBottom。

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

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

d3-time-format

2）将其包含在timeline.js来源：

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

现在它在浏览器中加载并运行良好，但我无法弄清楚如何让npm安装工作，这样我就可以构建一个npm包用于我的Angular2站点。

我在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;尝试了许多不同的rollup.config.js选项。我不确定这是我想要的方式，因为它似乎产生了一个包含我需要的所有d3代码的包文件。现在，汇总调用（包含在d3插件启动程序包中）失败：

rollup-plugin-commonjs

如果我删除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一起用于Angular，也可以在浏览器中使用？或者，如何配置汇总以使当前npm install d3-timeline文件有效？

谢谢！

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插件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})]
};

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

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

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

2 个答案: