CSS를 사용하여 플롯 축 위치

Question

축이 세 개인 경우 CSS를 사용하여 위치를 조정하려하지만 jsfiddle에서 볼 수있는 것처럼 작동하지 않습니다.

왼쪽의 첫 두 축과 오른쪽의 세 번째 축이 필요합니다. 가능하면 더 큰 너비이지만 작은 너비로 세 번째 것을 원합니다. 어떻게 조정할 수 있습니까? 여기

코드 ( 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; 
} 

자바 스크립트

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', 
}); 

에 다음 블록을 변경하는 경우.