Trying to create a 3D line chart? Check it out Here
Currently, the points and lines are working fine. However, I only want to detect mouse hover on the points (spheres) and not on the lines or grid. To achieve this, I have segregated all elements into different 3D objects:
lineContainer = new THREE.Object3D();
d3.select( lineContainer )
.selectAll()
.data(currentVal)
.enter().append(
function (d, i) {
// Code for creating lines
}
);
mainContainer.add( lineContainer );
pointsContainer = new THREE.Object3D();
d3.select( pointsContainer )
.selectAll()
.data(_allPoints)
.enter().append(
function (d, i) {
// Code for creating points and tooltips
});
mainContainer.add(pointsContainer);
scene.add(mainContainer);
function render() {
if(!tooltipShow){
// Detection logic for mouse hover
}
I used the same code and version of THREE.js as mentioned in the link here. However, it only detects the upper level points and not those behind in the z-axis. Any suggestions on how to manage that?