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文件有效？

谢谢！

来源

2017-06-21 Denise Mauldin

我认为问题的一部分是，您应该在您的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。

来源

2017-06-22 01:47:41 clhenrick

随着@ 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不再能直接通过浏览器使用的格式。

来源

2017-06-22 18:47:54

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

回答

相关问题