0

私は現在、X3DOM.js と D3.js を使用して API からのデータを表示する 3D ダイアグラムに取り組んでいます。したがって、これはシナリオです：

  1. APIにリクエストを送信する前にチャートを表示します（最初のチャートと呼びます）
  2. リクエストを送信します
  3. 新しいデータでまったく同じグラフを表示します (2 番目のグラフ)

グラフを更新せず、最初のグラフの下に 2 番目のグラフを表示します。結果は

  1. 最初のグラフが表示されないことがありますが、ページをリロードすることで修正できます
  2. リクエストなしエラー
  3. 2 番目のグラフは表示されず、代わりにピクセル サイズの黒い四角形が表示されます。グラフのコンテナーであることがわかります (その内容は表示されません)。

HTML検査と<x3d>タグを見て、そのすべての要素がそこにあります。AngularJS と RequireJS を使用しています。チャートコードはこちらからお借りしています。実際に何が起こるか知っている人はいますか？

index.html

<body ng-controller="CRating">
    <div class="container">
        <!-- Main content -->
        <div class="row">
            <!-- Graph -->
            <div class="col-md-10" ng-controller="CGraph">
                <div id="bar">
                    <h2>Bar Chart</h2>
                    <div id="chartBar"></div>
                </div>
            </div><!-- Graph -->
        </div><!-- Main content -->
    </div>

    <!-- scripts -->
    <script data-main="js/main" src="components/requirejs/require.js"></script>
</body>

controller.js

define([
    'jquery',
    'bootstrap',
    'd3',
    'app'
], function($, bootstrap, d3, app) {
    app.module.controller('CRating', ['$scope', 'sharedProperties', function($scope, sharedProperties) {
        // code
        function initProject(response) {
            if (status == OK) {
                // code
                $.when.apply($, requestPool).done(function() {
                    sharedProperties.setData(sentimentData);
                    $scope.$apply($, sharedProperties.getData());
                    console.log('Data', sentimentData);
                }).fail(function(error) {
                    console.log(error);
                });
            }
        }
    }]);
});

グラフ.js

define([
    'app',
    'd3'
], function(app, d3) {
    app.module.controller('CGraph', ['$scope', 'sharedProperties', function($scope, sharedProperties) {
        $scope.properties = sharedProperties;

        $scope.$watch('properties.getData()', function() {
            testChart();
        });

        function testChart() {
            function randomData() {
                return d3.range(6).map( function() { return Math.random()*20; } )
            };

            x3d = d3.select("#chartBar")
                .append("x3d")
                    .attr( "height", "400px" )
                    .attr( "width", "400px" );

            var scene = x3d.append("scene");
            scene.append("viewpoint")
                    .attr( "centerOfRotation", "3.75 0 10")
                    .attr( "position", "13.742265188709691 -27.453522975182366 16.816062840792625" )
                    .attr( "orientation", "0.962043810961999 0.1696342804961945 0.21376603254551874 1.379433089729343" );

            function refresh( data ) {
                shapes = scene.selectAll("transform").data( data );
                shapesEnter = shapes
                    .enter()
                    .append( "transform" )
                    .append( "shape" );

                // Enter and update
                shapes.transition()
                        .attr("translation", function(d,i) { return i*1.5 + " 0.0 " + d/2.0; } )
                        .attr("scale", function(d) { return "1.0 1.0 " + d; } );

                shapesEnter
                    .append("appearance")
                    .append("material")
                        .attr("diffuseColor", "steelblue" );

                shapesEnter.append( "box" )
                        .attr( "size", "1.0 1.0 1.0" );
            }

            refresh( randomData() )

            setInterval(function(){
                refresh( randomData() );
            }, 2500);
        }
    }]);
});
4

1 に答える 1

0

これに対する解決策は見つかりましたか？この問題は、requirejs + x3dom の組み合わせが原因である可能性があります。dom の準備が整うまで待ち、x3dom をロードし、x3dom がロードされた後に操作してください。関連記事はこちら: https://github.com/x3dom/x3dom/issues/382

私の場合、次のようなことをしています。

define(['require','domReady!'], function(require){  

    function runApp() {require what is needed for the app and run it}  

    require(['x3dom'], function() {  
        runApp();  
    });  
}
于 2014-08-04T17:02:57.233 に答える