0

我正在使用 D3 从 Json 数据源渲染到 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 的调用返回一个空选择。

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

4

1 回答 1

1

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

于 2012-05-03T04:05:27.883 回答