简体   繁体   English

使用模块捆绑与完整 D3 捆绑时 D3.v4 力图中断

[英]D3.v4 force graph breaks when using module bundling vs. complete D3 bundle

I've beed fiddling around with D3 force-directed graphs, eg https://bl.ocks.org/mbostock/4062045 in D3.v4.我一直在摆弄 D3 力导向图,例如 D3.v4 中的https://bl.ocks.org/mbostock/4062045 All works fine with the newest complete D3 build/bundle.使用最新的完整 D3 构建/捆绑包,一切正常。

I want to reduce the size of JS libraries loaded, and thus ended up using the rollup-based https://www.npmjs.com/package/d3-v4-bundler .我想减少加载的 JS 库的大小,因此最终使用了基于汇总的https://www.npmjs.com/package/d3-v4-bundler All my other, unrelated D3.v4 graphs work fine with rollup-bundled "hand-picked" modules and methods, but something goes wrong with d3-force.我所有其他不相关的 D3.v4 图形与汇总捆绑的“精选”模块和方法一起工作正常,但 d3-force 出现问题。

Already early on in the code when attempting to use d3-force methods:在尝试使用 d3-force 方法时,已经在代码的早期:

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function (d) { return d.id; }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(svgwidth / 2, svgheight / 2));

An error is thrown: "Uncaught TypeError: Cannot read property 'force' of undefined".抛出错误:“未捕获的类型错误:无法读取未定义的属性 'force'”。

I've tried pretty much every combination of modules and methods in d3-v4-bundler, but only if i export everything from "d3", ie use the whole thing, the force-directed graph works.我已经尝试了 d3-v4-bundler 中模块和方法的几乎所有组合,但只有当我从“d3”导出所有内容时,即使用整个内容,力导向图才有效。 Even bundling all modules separately doesn't work.即使单独捆绑所有模块也不起作用。 "d3-force" itself, to my knowledge, requires "d3-collection", "d3-dispatch", "d3-quadtree" and "d3-timer" but these are all correctly bundled via d3-v4-bundler.据我所知,“d3-force”本身需要“d3-collection”、“d3-dispatch”、“d3-quadtree”和“d3-timer”,但这些都通过 d3-v4-bundler 正确捆绑。

Is there possibly some other (external?) vital dependency to "d3-force" that could go missing in the bundling process that causes d3.forceSimulation().force to break?是否有其他(外部?)对“d3-force”的重要依赖可能会在导致 d3.forceSimulation().force 中断的捆绑过程中丢失? Or could this be a problem rooted in d3-v4-bundler or rollup itself?或者这可能是源于 d3-v4-bundler 或汇总本身的问题?

Found an answer to my problem, but not to very the reason behind it.找到了我的问题的答案,但不是其背后的原因。

For some reason, either some contents of only d3-force or the combined contents in my selection of d3 modules get minified with Uglifyjs in d3-v4-bundler in a manner that breaks the "force" decleration.出于某种原因,只有 d3-force 的某些内容或我选择的 d3 模块中的组合内容在 d3-v4-bundler 中使用 Uglifyjs 以打破“强制”声明的方式被缩小。 When removing the "-c negate_iife=false" parameters from d3-v4-bundler's uglifyjs command, even the minified code works for graphs generated with d3-force.从 d3-v4-bundler 的 uglifyjs 命令中删除“-c negate_iife=false”参数时,即使是缩小的代码也适用于使用 d3-force 生成的图形。 Of course the minimization rate is not as good, but obviously something in value consolidation breaks otherwise.当然,最小化率没有那么好,但显然价值整合中的某些东西会打破其他情况。

Not a big expert myself, but would be useful if the actual part that breaks could be tracked down.我自己不是一个大专家,但如果可以追踪到实际损坏的部分,那将会很有用。 "-c negate_iife=false" worked fine for other module bundles until d3-force was added, or at least so it seemed to me. “-c negate_iife=false”在添加 d3-force 之前适用于其他模块包,或者至少在我看来是这样。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM