3d graph javascript auto pan (by config?) on load

plotly.js
1

Hi there.
I have a 3d graph that I render like below.
So the view on the graph is from a diagonale angle (looking into the corner of x,y,z). But because of this, the upper part of the graph is out of the viewport… And so I always need to pan the graph into position, a bit down. Is there a way to set this by config or by some javascript call ?

Kind regards

{
    "data": [
        {
            "type": "scatter3d",
            "mode": "markers",
            "marker": {
                "color": "rgb(1,87,155)",
                "size": 2
            }
        }
    ],
    "layout": {
        "margin": {
            "l": 0,
            "r": 0,
            "t": 0,
            "b": 0
        },
        "autosize": true,
        "scene": {
            "aspectratio": {
                "x": 1,
                "y": 1,
                "z": 1
            },
            "camera": {
                "center": {
                    "x": 0,
                    "y": 0,
                    "z": -0.5
                },
                "eye": {
                    "x": 1.5,
                    "y": 1.5,
                    "z": 1
                },
                "up": {
                    "x": 0,
                    "y": 0,
                    "z": 1
                }
            },
            "xaxis": {
                "autotick": false,
                "tickmode": "linear",
                "ticks": "outside",
                "tick0": 0,
                "dtick": 1,
                "ticklen": 1,
                "tickwidth": 1,
                "gridwidth": 1,
                "title": {
                    "text": "x"
                },
                "autorange": "reversed"
            },
            "yaxis": {
                "autotick": false,
                "tickmode": "linear",
                "ticks": "outside",
                "tick0": 0,
                "dtick": 20,
                "ticklen": 1,
                "tickwidth": 1,
                "gridwidth": 1,
                "title": {
                    "text": "y"
                }
            },
            "zaxis": {
                "autotick": false,
                "tickmode": "linear",
                "ticks": "outside",
                "tick0": 0,
                "dtick": 4.38,
                "ticklen": 1,
                "tickwidth": 1,
                "gridwidth": 1,
                "title": {
                    "text": "z"
                }
            }
        }
    }
}
2

Is there anybody who knows how to adjust the default position/pan of the 3d graph ?

3

Plot your graph, move/zoom/pan whatever you want and then take the configuration of the current view from layout.scene.camera from your figure. Use that same view when you plot next time.

1 Like
4

Here is a demo for setting any desired camera position.
And more info is at: https://plot.ly/javascript/reference/#layout-scene-camera

5

Got it to my desire using

            center: {
                x: 0,
                y: 0,
                z: -0.2
            },
            eye: {
                x: 1.5,
                y: 1.5,
                z: 1
            }

I should have reached the values by experimenting with the center z-axis on my own and much earlier. I don’t know why I didn’t because it’s quite intuitive to not shift by -0.5 if it’s to far of the pane and use a lower value instead. Anyhow. I triedyour settings @archmoj and experimented with the values and finally got the graph to where I wanted it to be. Thanks.

1 Like