d3.select在ExtJs中返回空文档

我正在使用D3从Json数据源渲染成ExtJs组件。d3.select在ExtJs中返回空文档

从的test.html：

<html> 
    <head> 
     <title>Test</title> 
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> 
     <script type="text/javascript" src="http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js"></script> 
     <script type="text/javascript" src="Test.js"></script> 
    </head> 
    <body> 
     <script type='text/javascript'> 
      Ext.onReady(function(){ 
       Ext.create('Ext.panel.Panel', 
       { 
        layout: 'fit', 
        renderTo: Ext.getBody(), 
        items: [ 
         { 
          xtype: 'panel', 
          html : 'There should be a test below this' 
         }, 
         { 
          id: 'testPanel', 
          xtype: 'xxxviewtest' 
         } 
        ] 
       }); 
       d3.json("Test1.json", function(json) { Ext.getCmp ('testPanel').deliverJson (json); }); 
      }); 
     </script> 
    </body> 
</head>

和Test.js：

Ext.define('xxx.view.Test', { 
    extend: 'Ext.Component', 
    alias: 'widget.xxxviewtest', 

    deliverJson: function(json) { 
     var target = d3.select("#" + this.id); 
     if (target[0][0]) { 
      // install svg element and draw 
      ... 
     } 
    } 
});

在简单的测试情况下，这是工作的罚款，但在一个更加复杂的文档案件涉及标签面板和大量的的UI组件，在Test.js中对d3.select的调用返回一个空选择。

我需要做什么才能正确工作？

来源

2012-05-02 BrettonW

如果“Test.js中的d3.select返回一个空选择”，我想当时你查询的Ext组件没有完全显示。所以我建议将d3.json(...)移动到render事件的处理程序中以消除一种可能性。如果问题仍然存在，我们会找到另一种方法。

来源

2012-05-03 04:05:27

我将调用d3.json（...）转移到Ext层次结构中的按钮单击处理程序，它工作正常。我有一种感觉，它会是这样的，但我也（错误地）认为Ext.create（...）调用将在它在Ext.onReady（...）方法后的同步WRT调用。 – BrettonW

d3.select在ExtJs中返回空文档

回答

相关问题