0

我目前使用 X3DOM.js 和 D3.js 处理 3D 图，以显示来自 API 的数据。所以，这就是场景：

  1. 我在向 API 发送请求之前显示图表（我称之为第一张图表）
  2. 我发送请求
  3. 我用新数据显示完全相同的图表（第二张图表）

我不更新图表，我在第一个图表下方显示第二个图表。结果是

  1. 有时第一个图表不显示，但我可以通过重新加载页面来修复它
  2. 没有请求错误
  3. 第二个图表永远不会显示，而是我得到了一个像素大小的黑色方块。我可以说它是图表的容器（其内容不显示）。

我看一下 html 检查，<x3d>标签及其所有元素都在那里。我使用 AngularJS 和 RequireJS。我从这里借用图表代码。有人知道实际发生了什么吗？

索引.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>

控制器.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 回答