JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
CSS
body {
margin: 0px;
overflow: hidden;
}
JavaScript
var N = 9, t = 123, v = 30, data = d3.range(9).map(next);
function next () {
return {
time: ++t,
value: v = ~~Math.max(10, Math.min(90, v + 20 * (Math.random() - .5)))
};
}
setInterval(function () {
data.shift(); data.push(next()); update();
}, 1500);
var camera, scene, renderer, chart3d, newBar;
// эти методы нужны для D3-шных .append(), .remove() и .selectAll()
THREE.Object3D.prototype.appendChild = function (c) {
this.add(c); c.parentNode = this; return c;
};
THREE.Object3D.prototype.removeChild = function (c) {
this.remove(c);
}
THREE.Object3D.prototype.querySelectorAll = function (selector) {
var matches = [];
var type = eval(selector);
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
if (child instanceof type) {
matches.push(child);
}
}
return matches;
}
// а эти - для D3-шных .attr() и .transition()
THREE.Object3D.prototype.setAttribute = function (name, value) {
var chain = name.split('.');
var object = this;
for (var i = 0; i < chain.length - 1; i++) {
object = object[chain[i]];
}
object[chain[chain.length - 1]] = value;
}
THREE.Object3D.prototype.getAttribute = function (name) {
var chain = name.split('.');
var object = this;
for (var i = 0; i < chain.length - 1; i++) {
object = object[chain[i]];
}
return object[chain[chain.length - 1]];
}
init();
update();
animate();
function update () {
// используем D3 для стоздания, обновления и удаления 3D столбцов
var bars = d3.select( chart3d )
.selectAll("THREE.Mesh")
.data(data, function(d) { return d.time; });
bars.transition()
.duration(1000)
.attr("position.x", function(d, i) { return 30 * (i - N / 2); })
bars.enter().append( newBar )
.attr("position.x", function(d, i) { return 30 * (i - N / 2 + 1); })
.attr("position.y", 0)
.attr("scale.y", 1e-3)
.transition()
.duration(1000)
.attr("position.x", function(d,...