Closed kpykc closed 8 years ago
Yeah, maybe the design of Elegans is not suitable with the interaction using Comm API. But a hack shown below will help you.
<html lang="en">
<head>
<title>Plot Sample - Particles</title>
<link rel='stylesheet' href='common.css'>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script type="text/javascript" src="../release/elegans.js"></script>
<script src="http://cdn.rawgit.com/mrdoob/three.js/r49/examples/js/ImprovedNoise.js"></script>
<script type="text/javascript">
window.onload = function(){
var stage = new Elegans.Stage(d3.select("#vis")[0][0], {
save_image: true
});
var MAX=10, DATA_NUM=3, INTERVAL_MIN=0.5, INTERVAL_MAX=3, X_NUM=10, Y_NUM=10;
var color_scale = d3.scale.category20();
for(var n=0;n < DATA_NUM;n++){
var x_arr = [], y_arr = [], z_arr = [];
var point = {x:Math.random()*MAX,y:Math.random()*MAX};
var noise = ImprovedNoise();
for(var i=0;i < X_NUM;i++){
point.x = point.x + Math.random()*(INTERVAL_MAX - INTERVAL_MIN) + INTERVAL_MIN;
for(var j=0;j < Y_NUM;j++){
point.y = point.y + Math.random()*(INTERVAL_MAX - INTERVAL_MIN) + INTERVAL_MIN;
point.z = noise.noise(point.x,point.y,0);
x_arr.push(point.x);
y_arr.push(point.y);
z_arr.push(point.z);
}
}
var data = {x:x_arr, y:y_arr, z:z_arr};
var color = color_scale(n);
stage.add(new Elegans.Particles(data, {color: color, name: "molecule"+String(n)}));
}
stage.render();
/** Remove legend, meshes in the stage and chart objects **/
stage.legend_space.selectAll("div").remove();
stage.clear();
stage.charts = [];
/** Add charts again **/
stage.add(new Elegans.Particles({x: [1,2,3], y: [2,3,4], z: [1,1,1,]}, {color: "#000", name: "molecule"}));
stage.render();
};
</script>
</head>
<body>
<div id="vis">
</div>
</body>
</html>
Three lines below are the essential part.
/** Remove legend, meshes in the stage and chart objects **/
stage.legend_space.selectAll("div").remove();
stage.clear();
stage.charts = [];
I cannot modify stage.clear
because components/player depends on it but If you have an idea feel free to send pull-request :~)
Thanks this solves the question partially. My javascript experience is about month or two, so it will take some time before pull requests, but i'll remember about this proposition :).
Should I close this issue?
Yes please, add another issue if the second problem about the reuse of WebGL context is important for you.
Hi,
I'm trying to use your library for visualisation in a Jupyter notebook (the code is below) .
I'm encountering following problem, when i'm sending new data to js and do
stage.clear();
andstage.dispose();
this does not clear charts in fact, moreover second update of data (in this fashion) leads to 2 point sets but 3 labels (e.g. particles1, particles1, particles2).
It would be also nice to have a way to reuse THREEjs WebGL context, by e.g. specifying
scene
argument tostage.render
(https://stackoverflow.com/questions/21548247/clean-up-threejs-webgl-contexts).Though, Eleganse was not designed for a purpose I want to use it probably.
P.S. BTW, THREE.js suggests to
Thank you for a nice library!