d3.js 백분율을 사용하는 크기 조정 가능 선 그래프

Question

픽셀로 백분율로 크기 조정이 가능한이 선형 차트를 만들려고했습니다.

솔루션을 찾는 데 도움을 줄 수있는 사람이 있습니까? 당신의 이점에 그것을 활용 -

여기 a link

Answer 1

D3 선택기 can accept a node reference뿐만 아니라 문자열 선택을합니다. 크기 (상대 또는 절대)에 대한 단위 유형을 가질 수있는 컨테이너에 SVG를 넣고 컨테이너별로 SVG 크기를 설정합니다.

var el = document.getElementById('canvas'); 
var svg = d3.select(el).append('svg'); 
setSize(svg, el); 

function setSize(child, parent) { 
    child && parent && 
    child.attr('width', parent.clientWidth) 
     .attr('height', parent.clientHeight); 
} 

창에 resize 이벤트를 부착하고 콜백에서 SVG 크기 업데이트 : 이것은 물론, 과도하게 단순화되고, 테스트되지 않은

var that = this; 
window.addEventListener('resize', function (e) { 
    that.setSize(el); 
}); 

을, 그러나 당신이 시작할 수 있어야합니다.

Mozilla 개발자 네트워크의 docs on the resize event을 참조하십시오.

Answer 2

D3을 사용할 때 x 축 또는 y 축의 축척을 조정하려면 데이터 범위에 맞게 조정할 수 있다면 쉽게 수행 할 수 있습니다. 축의 축척을 재설정 할 수 있습니다.

개발을 예로 들어이 걸릴 :에 ... y 축 스케일이 조정되어 새로운 곡선을 때 이 http://mpf.vis.ywng.cloudbees.net/

(곡선을 추가 할 범례를 클릭 ... 문제, 나는 수 있다고 생각 해결할 코드를 조금 수정)