Question

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

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

我没有更新图表，我在第一张图表下方显示第二张图表。结果是

有时第一个图表不显示，但我可以通过重新加载页面来修复它
没有请求错误
第二张图表从不显示，而是我有一个像素大小的黑色方块。我可以告诉它是图表的容器（其内容不显示）。

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

的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);
                });
            }
        }
    }]);
});

graph.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);
        }
    }]);
});

Answer 1

你找到了解决方案吗？问题可能是因为组合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();  
    });  
}

使用d3不显示x3dom图表

1 个答案: