2

在结合 Extjs 和 D3 时，我正在研究一些非常有趣的东西。

一般来说，ExtJS 会渲染整个页面的主框架，而 D3 会在该框架的某个 div 中渲染动态图。

由于 Extjs 中的渲染逻辑相当复杂，我放置 D3 渲染逻辑的位置似乎至关重要。

在这里我尝试了两个：

1）放入'initComponent'

[ExtJS]
Ext.define('EDS.view.selector.Container', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectorcontainer',

    initComponent: function(){
        renderSelectorOrgView();
    }
}

[D3]
function renderSelectorOrgView(divId, divHeight, divWidth) {
    var svg = d3.select("#" + divId).append("svg");
    ....
}

问题是它不起作用，因为在“initComponent”期间，div 没有完全生成。

2) 放入全局 Ext.onReady()

原来D3只能选择空结果。我认为原因类似于1）

3) 放入 onRender()

从逻辑上讲，这应该可以正常工作。事实上，D3 可以完美地获取 div 及其属性。然而问题是，ExtJS 渲染过程完全被这段代码破坏了。整个布局已损坏。那么我是否遗漏了 onRender() 中的任何重要内容？

Ext.define('EDS.view.selector.Container', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectorcontainer',

layout: 'fit',
onRender: function(){

    //// Render D3
    // Selector
    console.log("onRender");
    console.log(this.height);
    console.log(this.width);

    var divId = Ext.getCmp('selector-organization').id;
    var divHeight = Ext.get(divId).getHeight();
    var divWidth = Ext.get(divId).getWidth();
    console.log(divHeight);
    console.log(divWidth);
    renderSelectorOrgView(divId, divHeight, divWidth);   

},
}
4

3 回答 3

3

使您的 d3 代码与 extjs 一起工作的最佳方法是将 d3 代码放在不同的 html 中。然后在你的 extjs 面板中使用 autoLoad 配置并给出 html 的 url。

{ 
  xtype : 'panel',
  title : 'd3Graph',
  autoLoad : { url : 'd3code.html', scripts : true} // your HTML file containing d3 code.
}

我已经尝试过了，它对我有用，没有任何错误。

另一种方法是使用 contentEl 配置并在配置中给出 d3 可视化正在呈现的 div 的名称。

于 2013-08-23T09:40:05.943 回答
1

如果可以将 D3 对象呈现为 HTML 标记字符串，则可以在 Panel 模板中包含该字符串。另一种方法是让 Ext JS 组件像往常一样呈现自己，然后在boxready事件处理程序中注入新的标记。无论哪种方式都将避免渲染冲突。

于 2013-08-21T05:13:51.297 回答
1

您必须添加this.callParent(arguments);您的onRender. 在这里，您完全替换了 Panel 自己的渲染逻辑，这就是它最终被破坏的原因。

您还可以在讨论类似主题的地方看到这个和这个问题。

于 2013-08-20T09:36:30.373 回答