NVD3.js scatter

안녕하세요, nvd3.js 라이브러리와 함께 scatterChart를 만들려고합니다. 이제는 두 축 모두 동일한 너비/높이를 갖기를 원합니다. 그러나 코드에서와 같이 CSS의 높이와 너비가 모두 같은 높이로 설정된 경우에도 y 축은 높이가 더 길게 유지됩니다.NVD3.js scatter

JS :

var chart = nv.models.scatterChart() 
          .width(300) 
          .height(300) 
          .showXAxis(true) 
          .showYAxis(true) 
          .forceX([-100,100]) 
          .forceY([-100,100]) 
          .tooltips(true) 
          .showLegend(false) 
          .tooltipContent(function(){ 
           return 'clock'; 
          });

CSS :

#main-chart { 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
}

HTML :

<div class="container" ng-controller="film_factor_controller"> 
    <svg bubble-chart id="main-chart"></svg>

희망 누군가가 나를 도울 수

출처

2013-12-11 Sjaak Rusma

가능한 [nvd3 차트의 높이 및 너비 설정 방법] (http://stackoverflow.com/questions/16474988/how-to-set-height-and-width-of-nvd3-chart) – shabeer90

소스 코드에서 forceX와 forceY가 D3의 domain() API를 사용하여 차트에 설정되어 있음을 알 수 있습니다. 그래서이 nvd3 API는 실제 길이가 d3으로 계산되고 입력 범위에 의해 결정되므로 '강제로'실행되지 않습니다.

아마도 maxY와 maxX가 축의 가장자리에서 정확하게 위치하도록 도메인을 계산해야 할 수도 있습니다.

출처

2013-12-15 15:16:00

NVD3.js scatter

답변

관련 문제