2

Extjs と D3 を組み合わせると、非常に興味深いことを掘り下げています。

一般に、ExtJS はページ全体のメイン フレームをレンダリングし、D3 はそのフレームの特定の div で動的グラフをレンダリングします。

Extjs のレンダリング ロジックは非常に複雑なため、D3 のレンダリング ロジックをどこに配置するかが重要なようです。

ここで私は2つを試しました：

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.
}

私はこれを試しましたが、エラーなく動作します。

もう 1 つの方法は、contentEl 構成を使用して、d3 ビジュアライゼーションがレンダリングされる構成で div の名前を指定することです。

于 2013-08-23T09:40:05.943 に答える