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插件？

回答

相關問題