dc.js에서 SVG 크기 조정

Question

dc.js에서 SVG의 크기를 조정하려고합니다. 메인 페이지 자체의 NASDAQ 예제에서. 너비/높이를 변경하면 크기를 조정하는 대신 svg를 자릅니다. 예를 들어 너비와 높이를 반으로 변경하면 svg가 절반으로 줄어들고 절반 만 보여줍니다. 나는 정말로 바보 같은 일을하고 있다는 것을 알고있다.

좋습니다.

Answer 1

viewBox 특성을 사용해야합니다.

viewBox 특성을 사용하면 주어진 그래픽 집합이 특정 컨테이너 요소에 맞게 확장되도록 지정할 수 있습니다. - 당신이 CSS에서 컨테이너의 폭과 높이를 변경하는 경우 http://jsfiddle.net/LPWhE/가 당신이 SVG의 크기를 조정 - 여기 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

은 예입니다.

svg.attr({ 
    "width": "100%", 
    "height": "100%", 
    "viewBox": "0 0 250 250" 
}) 

Answer 2

다음은 내가 한 일입니다. 내 HTML 페이지에서 나는 다음과 같은 라인을했다 ". 막대 그래프"내 JS 페이지에서

<div id="resize"></div> 

, 내가 설치라는 막대 차트 그래프 내 CSS 스타일 시트에 내가 넣어

var width = document.getElementById("resize").offsetWidth; 

barChart = dc.barChart("#barChart"); 

barChart.width(width) 
    .height(350) 
    .margins({top: 10, right: 40, bottom: 30, left: 40}) 
    .dimension(rooms) 
    .group(kWOccupiedData) 
    .elasticY(true) 
    .gap(1) 
    .x(d3.scale.ordinal().domain([0, 5])) 
    .xUnits(dc.units.ordinal) 
    .yAxisLabel("kWh") 
    .xAxisLabel("Room") 
    .renderHorizontalGridLines(true) 
    .transitionDuration(700); 

window.onresize = function(event) { 
    var newWidth = document.getElementById("resize").offsetWidth; 

    barChart.width(newWidth/2) 
    .transitionDuration(0); 

    dc.renderAll(); 

    barChart.transitionDuration(750); 
}; 

마지막 :

.resize { 
    width: 100%; 
    height: 350px; 
} 

#barChart { 
    clear: both; 
    width: 100%; 
} 

을 당신이 당신의 창 크기를 조정할 때 이제 차트뿐만 아니라 크기를 조정해야 나는 다음과 같은 순서를했다.