Диаграмма x3dom не отображается с использованием d3

В настоящее время я работаю над трехмерной диаграммой, используя X3DOM.js с D3.js для отображения данных из API. Итак, это сценарий:

  1. Я отображаю график перед отправкой запроса в API (я называю это первым графиком)
  2. Я отправляю запрос
  3. Я отображаю точно такой же график с новыми данными (второй график)

Я не обновляю график, я отображаю второй график ниже первого. Результат

  1. иногда первый график не отображается, но я могу это исправить, перезагрузив страницу
  2. ошибка запроса
  3. второй график никогда не отображается, вместо этого я получил черный квадрат размером с пиксель. Я могу сказать, что это контейнер диаграммы (содержание которого не отображается).

Я смотрю на проверку 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);
                });
            }
        }
    }]);
});

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);
        }
    }]);
});
Источник

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();  
    });  
}
Источник
Другие вопросы по тегам