Extjs + D3：渲染冲突答案

【问题标题】：Extjs + D3: render conflictExtjs + D3：渲染冲突
【发布时间】：2015-05-12 18:38:16
【问题描述】：

在结合 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);   

},
}

【问题讨论】：

标签： extjs d3.js conflict

【解决方案1】：

让您的 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 的名称。

【讨论】：

【解决方案2】：

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

【讨论】：

DOM 元素完全渲染后是否会触发'boxready'，并且在以后的渲染中不会改变？
Ext JS 组件首先渲染到 DOM 中，然后进行布局（分配尺寸）。 boxready 事件在第一个布局之后触发，并且只触发一次。之后，组件的布局（尺寸）可以更改，但其 DOM 标记通常不会更改。

【解决方案3】：

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

您还可以查看讨论类似主题的this 和this 问题。

【讨论】：