Extjs + D3: визуализировать конфликт

Question

Я копаю во что-то действительно интересное при объединении 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», то ДИВ не полностью генерироваться.

2) поместить в глобальную Ext.onReady()

Это оказалось, что D3 может выбрать только пустой результат. Я думаю, что причина аналогична 1)

3) положить в OnRender()

Логически это должно работать нормально. И на самом деле D3 может получить div и его attr отлично. Однако проблема заключается в том, что процесс визуализации 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); 

}, 
} 

Answer 1

Если вы можете визуализировать объект D3 как строку разметки HTML, вы можете включить эту строку в шаблон панели. Другой способ - позволить компонентам Ext JS визуализировать себя как обычно, а затем вводить новую разметку в обработчик события boxready. В любом случае избежать конфликтов.

Answer 2

Вы должны добавить this.callParent(arguments); в вашем onRender. Здесь вы полностью заменяете собственную логику рендеринга Panel, поэтому она заканчивается.

Вы также можете посмотреть this и this вопросы, на которых обсуждается аналогичная тема.

Answer 3

Лучший способ заставить ваш код d3 работать с extjs - сохранить код d3 в другом html все вместе. Затем в панели extjs используйте конфигурацию autoLoad и укажите URL-адрес html.

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

Я пробовал это, и он работает для меня без каких-либо ошибок.

Другой способ - использовать конфигурацию contentEl и указать имя div в конфигурации, где визуализируется визуализация d3.