d3 v4插件 - 如何要求其他d3插件?
我试图构建一个d3 v4插件,遵循https://bost.ocks.org/mike/d3-plugin/ - 最终目标是能够安装插件并将其用于Angular 2/4组件。d3 v4插件 - 如何要求其他d3插件?
我的回购是在这里:
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
。我已经尝试了几种不同的方法:它们包括在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源
1):
现在它在浏览器中加载并运行良好,但我无法弄清楚如何让npm install工作,以便我可以构建一个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
文件有效?
谢谢!
我认为问题的一部分是,您应该在您的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 p lugins被配置,例如Susie Lu's插件d3.legend。
随着@ 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
模块,它可以在浏览器中加载,加载从package.json
作为外部依赖的peerDependencies
部分(包含d3
) (这意味着他们不会被捆绑到我的d3-timeline.js
)。
然后我从build
目录复制d3-timeline.js
到dist
目录中的例如HTML文件使用,因为src/timeline.js
不再能直接通过浏览器使用的格式。