我目前使用 X3DOM.js 和 D3.js 处理 3D 图,以显示来自 API 的数据。所以,这就是场景:
- 我在向 API 发送请求之前显示图表(我称之为第一张图表)
- 我发送请求
- 我用新数据显示完全相同的图表(第二张图表)
我不更新图表,我在第一个图表下方显示第二个图表。结果是
- 有时第一个图表不显示,但我可以通过重新加载页面来修复它
- 没有请求错误
- 第二个图表永远不会显示,而是我得到了一个像素大小的黑色方块。我可以说它是图表的容器(其内容不显示)。
我看一下 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);
}
}]);
});