PlotlyJS - Surface Plotのカテゴリ軸の長さを設定する

Question

カテゴリ軸の長さを手動で設定しようとしています。詳細には、x軸の長さをy軸の長さと同じにします。これまでのところ、さまざまなレイアウト設定を結果なしでplotly manualから試しました。

var layout = { 
 
    width: 400, 
 
    height: 300, 
 
    plot_bgcolor: '#98ff6d', 
 
}; 
 

 
var data = [{ 
 
    z: [ 
 
    [1, 20, 10, 12, 1, 1, 20, 10, 12, 1], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 20, 20, 12, 0], 
 
    [1, 20, 10, 12, 1, 13, 20, 0, 12, 21], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 20, 10, 1, 12], 
 
    [1, 20, 10, 12, 1, 1, 20, 10, 12, 14], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 13, 4, 12, 16, 1, 21, 20, 0, 18], 
 
    [1, 20, 0, 12, 1, 21, 65, 10, 12, 1], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 20, 10, 15, 0], 
 
    [1, 20, 10, 12, 1, 1, 30, 10, 12, 14], 
 
    [24, 13, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 29, 1, 19, 31], 
 
    [1, 20, 10, 12, 1, 31, 0, 10, 12, 19], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 20, 10, 11, 21], 
 
    [1, 0, 10, 12, 1, 1, 10, 10, 12, 21], 
 
    [24, 1, 0, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 20, 1, 19, 36], 
 
    [1, 20, 10, 12, 1, 21, 21, 10, 12, 31], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 12, 4, 12, 16, 1, 21, 43, 12, 18], 
 
    [1, 20, 10, 12, 1, 1, 39, 10, 12, 13], 
 
    [24, 1, 12, 19, 0, 1, 20, 12, 2, 1], 
 
    [8, 1, 4, 12, 16, 1, 20, 10, 1, 11], 
 
    [1, 20, 10, 12, 1, 19, 38, 10, 12, 16], 
 
    [24, 12, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 1, 4, 12, 16, 1, 29, 4, 12, 3], 
 
    [1, 20, 0, 12, 1, 1, 23, 10, 12, 11], 
 
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1], 
 
    [8, 19, 4, 12, 16, 1, 20, 10, 12, 19], 
 
    [1, 20, 10, 12, 1, 1, 24, 10, 12, 0], 
 
    [24, 1, 12, 19, 023, 1, 22, 10, 12, 1], 
 
    [8, 1, 41, 12, 16, 1, 20, 10, 12, 11] 
 
    ], 
 
    x: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10'], 
 
    y: ['Messung 1', 'Messung 2', 'Messung 3', 
 
    'Messung 4', 'Messung 5', 'Messung 6', 
 
    'Messung 7', 'Messung 8', 'Messung 9', 
 
    'Messung 10', 'Messung 11', 'Messung 12', 
 
    'Messung 13', 'Messung 14', 'Messung 15', 
 
    'Messung 16', 'Messung 17', 'Messung 18', 
 
    'Messung 19', 'Messung 20', 'Messung 21', 
 
    'Messung 22', 'Messung 23', 'Messung 24', 
 
    'Messung 25', 'Messung 26', 'Messung 27', 
 
    'Messung 28', 'Messung 29', 'Messung 30', 
 
    'Messung 31', 'Messung 32', 'Messung 33', 
 
    'Messung 34', 'Messung 35', 'Messung 36' 
 
    ], 
 
    type: 'surface' 
 
}]; 
 

 
Plotly.newPlot('plot', data, layout, { 
 
    displayModeBar: true, 
 
    displaylogo: false 
 
});

#plot { 
 
    height: 100vh, width:100vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified plotly.js JavaScript --> 
 
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 

 

 
<div id="plot"></div>

Answer 1

sceneオブジェクト、および（必要であれば）zaxisプロパティをそのaxis、yaxis上、ご希望のrangeを設定し、あなたのlayout与えます。例えば。 CodePenに

var MIN_VAL = -100, MAX_VAL = 100; 
var layout = { 
    scene:{ 
     axis: { 
      nticks: 10, 
      range: [ MIN_VAL, MAX_VAL ] 
     }, 
     yaxis: { 
      nticks: 10, 
      range: [ MIN_VAL, MAX_VAL ] 
     }, 
     zaxis: { 
      nticks: 7, 
      range: [ MIN_VAL, MAX_VAL ] 
     }, 
     aspectmode: "manual", 
     aspectratio: { x: 1, y: 1, z: 0.7 }, 
     bgcolor : '#98ff6d' 
    }, 
    autosize: false, 
    width: 400, 
    height: 300, 
    margin: { l: 0, r: 0, b: 50, t: 50, pad: 4 } 
}; 
Plotly.newPlot('plot', data, layout); 

Plotly has a working example（すなわち、さらに多くのレイアウトオプションの使用を示しています）。