javascript - D3 Javascript - 嵌套函数可能存在问题 - 生成控制台错误

Question

你好，Stackoverflow。通常情况下，一旦解决了最初的问题，您就会遇到另一个问题。昨天我发布了一个关于 实现 D3 可视化。 Sparta93 迅速回答了我的问题(也许你也可以在这个问题上提供帮助)。

正如我所指出的，我实际上将 D3 Viz 嵌入到打包应用程序 Oracle Big Data Discovery (BDD) 中。 BDD 使用可视化 渲染器来显示图表。这要求 JS block 位于 Chart 函数内(整个代码主体位于下面链接的 JS Fiddle 中，以便于阅读和审查):

renderChart: function(queryResults) {

当我运行代码时，它会生成一个错误 分层不是函数。

Uncaught TypeError: d3.stratify is not a function
at S.renderChart (script:44)
at S.executeQueryCallback (eval at globalEval (barebone.jsp:4), <anonymous>:1:3460)
at S.handleResize (eval at globalEval (barebone.jsp:4), <anonymous>:1:3751)
at constructor.resizeListener (eval at globalEval (barebone.jsp:4), <anonymous>:1:17193)
at Object.run (eval at globalEval (barebone.jsp:4), <anonymous>:1:16634)
at i (barebone.jsp:32)

如果我重新排序代码并将 Cluster 放在第一位，我会收到类似的错误。

我怀疑这个问题与这两个函数位于“renderChart: function(queryResults)”内这一事实有关。我是 DBA、大数据和 BI 人员，所以我的 JS 技能相当有限。我可能勉强将代码拼凑在一起以使其正常工作。我有更简单的工作，即在 BDD 中工作 不会出错。但是它没有任何子功能

这是一个 fiddle ，其中代码按预期工作(感谢 Sparta93)。在“正常”上下文中工作的图表:https://jsfiddle.net/hb4oLy2x/

这里是一个 fiddle ，只是为了简单地发布所有代码。它不会运行，因为它依赖于服务器端 BDD 可视化渲染器。我围绕我认为存在问题的要素发表了一些评论。图表在 BDD 上下文中不起作用(这是有问题的代码):https://jsfiddle.net/sx7oaput/

这是一个 Fiddle，我在其中删除了 d3 v4 的 URI。有趣的是，它在控制台中创建了类似的错误。模拟错误的图表代码(也许只是巧合):https://jsfiddle.net/u48o39k2/

为了简化共享代码，这是另一个 fiddle 。这确实在 BDD 中成功渲染了条形图和 HTML 表。在 BDD 上下文中工作的图表:https://jsfiddle.net/j7r9f743/

非常感谢指导、建议和/或帮助。

Answer 1

我尝试查看其他行动方案，因为我知道某些可视化确实有效。我在网上找到了这段代码，当我提取各个部分并在工作代码中测试替换时，我让它工作了。

var tree = d3.layout.tree()
.size([360, diameter / 2 - 80])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 10) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

http://codepen.io/anon/pen/xItvw

非常感谢Code Pen的作者“CAPTAIN ANONYMOUS”(笑)。