在 jsfiddle 中从 Ext JS 调用 D3

Question

我有以下 D3 代码，它按预期工作。

``http://jsfiddle.net/6Ldad16n/3/

现在，我需要从 Ext JS 代码中运行这个。所以我为此

创建了另一个fiddle

``http://jsfiddle.net/07kk8fzs/

我相信还需要其他一些东西才能让它在 Ext JS 中运行，因为显示的结果是空白的，并且控制台中没有错误。

有人可以帮我解决这个问题吗？

谢谢

Answer 1

你不应该覆盖 afterRender 方法（它是一个私有方法，因此你不应该依赖它的存在），而是把它放在你的 initComponent 方法中：

this.on('afterrender', function(){
    this.loadScript(this.onD3Loaded, this);
}, this);

您的代码无需此修改即可正常工作，但最佳做法是添加您自己的事件侦听器而不是覆盖框架的。

此外，您的代码只定义了您的d3.widgets.Treeview class，并没有实例化它。尝试在 Ext.define:

之后将其添加到您的代码中

Ext.create('d3.widgets.Treeview', {
    renderTo : Ext.getBody()
});

我测试过将它添加到您的 fiddle，但其他东西会引发错误，而且我对 D3 的了解不足以调试它

Calling D3 from Ext JS in jsfiddle