Setting center/eye in Plotly.js (React Plotly)

plotly.js
1

Setting center/eye in Plotly.js (React Plotly)

Hey folks, I’m banging my head against the wall trying to get Plotly’s camera to behave. I’ve got a 3D scatter plot and I want clicking a point to center the view/rotation on that point.

I’ve tried:

// Attempt #1: Direct camera update

setCamera({

center: {x: clickedPoint.x, y: clickedPoint.y, z: clickedPoint.z},

eye: {x: clickedPoint.x + 2, y: clickedPoint.y + 2, z: clickedPoint.z + 2},

up: {x: 0, y: 0, z: 1}

});

// Attempt #2: Using relayout

const plotElement = document.getElementsByClassName('js-plotly-plot')[0];

Plotly.relayout(plotElement, {

'scene.camera': {

center: {...},

eye: {...}

}

});

But the camera just zooms into weird places or flies off into space :rocket:

The docs talk about camera properties but don’t really explain how to properly set the rotation center. Am I missing something obvious here?

Using:

  • react-plotly.js

  • React 18

  • Latest Plotly