Extjs+；D3：渲染冲突

在结合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） 放入全局分机onReady（）

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

3） 放入onRender（）中

从逻辑上讲，这应该是可行的。事实上D3可以完美地得到div和attr。然而问题是，ExtJS渲染过程完全被这段代码破坏了。整个布局已损坏。那么我是否遗漏了onRender（）中的任何重要内容

---

您必须添加

this.callParent（参数）onRender

中执行code>。在这里，您完全替换了面板自己的渲染逻辑，这就是它最终损坏的原因

---

您还可以看到讨论类似主题的内容和问题。

如果可以将D3对象呈现为HTML标记字符串，则可以将该字符串包含在面板模板中。另一种方法是让extjs组件像往常一样呈现自己，然后在

boxready

事件处理程序中注入新标记。任何一种方法都可以避免呈现冲突。

让d3代码与extjs一起工作的最佳方法是将d3代码保存在不同的html中。然后在extjs面板中使用自动加载配置并给出html的url

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

我已经试过了，它对我来说没有任何错误

---

另一种方法是使用contentEl-config，并在配置中提供呈现d3可视化的div的名称

“boxready”是在DOM元素完全渲染后触发的，并且在以后的渲染中不会更改吗？Ext JS组件首先渲染到DOM中，然后进行布局（指定维度）。

boxready

事件在第一次布局后激发，并且只激发一次。之后，组件的布局（维度）可以更改，但其DOM标记通常不会更改。

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