nvd3 불연속 막 대형 차트가 전체 svg 영역을 차지하지 않습니다

Question

svg에 추가하는 차트가 svg의 전체 영역을 차지하지 않으므로 nvd3을 사용하는 수직 막 대형 차트에서이 문제가 발생합니다. 따라서 올바르게 정렬되지 않습니다. 아래 그림은 상자 5에서 차트가 오른쪽 영역 만 차지하고 전체 상자는 차지하지 않는 것을 볼 수 있습니다.

이 문제를 해결할 수있는 사람을 도울 수 있습니까? 나는 몇 시간 동안이 일을 해왔고 온라인에서 유용한 것을 찾지 못했습니다.

TIA

Answer 1

많은 해킹을 시도한 후에 차트가 svg에서 올바르게 정렬되지 않은 이유는 nv.d3.js 라이브러리 자체의 차트 여백에 대한 하드 코딩 된 값 때문이었습니다. 라인 (3208)에 여백 값을 변경

나를 제대로 차트에 맞게 도움을 주었다.

Answer 2

당신은 내가 어떻게 문제를 해결하는 추측을거야 코드를 지정하지 않은 계정에 촬영 ....

당신의 호출 경우

-

 <div id="chart1"> 
      <svg></svg> 
    </div> 

는이 같은 CSS를 가지고 있는지 확인 HTML이 같은 차트

#chart1 { 
height: 600px; 
width: 600px; 
float: left; 
margin-top: 60px; 
padding-bottom: 0px; 
} 

아니면 자바 스크립트의 폭과 높이를 설정하려는 경우,이 같은 모습하도록 코드 수정 -

nv.addGraph(function() { 
    var chart = nv.models.discreteBarChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return d.value }) 
    .staggerLabels(true) 
    .tooltips(false) 
    .showValues(true) 
    .options({ height: 600, 
    width: 600, 
    }); 

희망이 그것은 당신을 도울 아마 너무 늦기

Answer 3

하는 데 도움이 이 문제는 앞으로 오는 사람을 위해이 문제를 해결할 것입니다. 필자는 분리 된 가로 막 대형 차트에 대해서는이 점을 테스트하지 않았지만 파이 차트에서 작동한다는 것을 알고 있습니다.

설정 음의 값을 차트의 마진 - .margin({top: -20, right: -20, bottom: -20, left: -20})

내 결과 :

전에

후

약간 벗어났습니다 ...하지만 그 요점은 알 수 있습니다.