我已经开始使用D3力导向图,例如:在D3.v4中的https://bl.ocks.org/mbostock/4062045。一切正常,最新的完整D3构建/捆绑。
我想减少加载的JS库的大小,因此最终使用基于汇总的https://www.npmjs.com/package/d3-v4-bundler。我所有其他不相关的D3.v4图表与汇总捆绑的“精选”模块和方法配合得很好,但d3-force出了问题。
尝试使用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));
抛出错误:“未捕获的TypeError:无法读取未定义的属性'force'”。
我已经尝试了d3-v4-bundler中的每个模块和方法的组合,但只有当我从“d3”导出所有东西时,即使用整个东西,力导向图才有效。即使单独捆绑所有模块也不起作用。据我所知,“d3-force”本身需要“d3-collection”,“d3-dispatch”,“d3-quadtree”和“d3-timer”,但这些都是通过d3-v4-bundler正确捆绑的。
是否有一些其他(外部?)对“d3-force”的重要依赖可能会在捆绑过程中丢失,从而导致d3.forceSimulation()。force to break?或者这可能是一个根植于d3-v4-bundler或汇总本身的问题?
找到了我的问题的答案,但没有找到它背后的原因。
由于某种原因,只有d3-force的某些内容或我选择的d3模块中的组合内容在d3-v4-bundler中以一种打破“力”贬值的方式与Uglifyjs缩小。从d3-v4-bundler的uglifyjs命令中删除“-c negate_iife = false”参数时,即使缩小的代码也适用于使用d3-force生成的图形。当然,最小化率并不是那么好,但显然价值合并中的某些东西会破坏。
我自己不是一个大专家,但如果可以追踪断裂的实际部分会很有用。 “-c negate_iife = false”适用于其他模块捆绑,直到添加d3-force,或者至少在我看来。