CSSを使用したPlotly Axis Position

Question

私は3軸を持っており、CSSを使って位置を調整しようとしていますが、jsfiddleで見られるように動作しません。

私は最初の2つの軸を左側に、3番目の軸を右側にしたいと思います。可能であれば、私は3番目の高さがより高いが幅は小さいものを希望します。どうすれば調整できますか？ここで

コード（ https://jsfiddle.net/3usfa3ad/）です：

HTML

<div id="XAxis" class="left" ></div> 
<div id="YAxis" class="left" ></div> 
<div id="XYAxis" class="right" ></div> 

CSS

div form p.left { 
    float: left; 
    clear: both; 
} 
div form p.right { 
    float: right; 
    clear: both; 
} 

はJavaScript

var d3 = Plotly.d3; 
var gd3 = d3.select("div[id='XAxis']"); 
var my_XAxis = gd3.node(); 
gd3 = d3.select("div[id='YAxis']"); 
var my_YAxis = gd3.node(); 
gd3 = d3.select("div[id='XYAxis']"); 
var my_XYAxis = gd3.node(); 

var layout = { 
    xaxis: { 
     range : [0, 1] 
    }, 
    yaxis: { 
     range : [0, 1] 
    }, 
    margin: {t: 20}, 
    hovermode: 'closest', 
} 

Plotly.newPlot(my_XAxis, [], layout); 
Plotly.newPlot(my_YAxis, [], layout); 
Plotly.newPlot(my_XYAxis, [], layout); 

Answer 1

CSSが奇妙に見えます。それを変更してみてください：

div.left { 
    float: left; 
    clear: both; 
} 
div.right { 
    float: right; 
    clear: both; 
} 

あなたは

gd3 = d3.select("div[id='XYAxis']") 
    .style({ 
    width: 0.5 * WIDTH_IN_PERCENT_OF_PARENT + '%', 
    height: 1.5 * HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
}); 

に次のブロックを変更する場合は、第三の要素のための所望のサイズの変更を取得する必要があります。