d3.js
반응 형 d3.js 차트를 작성하는 방법

Angular 2 AngularJS CSS HTML JavaScript jQuery Node.js React SVG TypeScript

통사론

var width = document.getElementById ( 'chartArea') .clientWidth;
var height = width / 3.236;
window.onresize = resizeFunctionCall;

부트 스트랩 사용하기

자주 사용되는 한 가지 방법은 차트가 존재할 영역을 정의하기 위해 부트 스트랩 의 격자 프레임 워크를 사용하는 것입니다.이를 clientWidth 변수와 window.onresize 이벤트와 함께 사용하면 반응 형 d3 SVG를 매우 쉽게 생성 할 수 있습니다 .

차트를 작성할 행과 열을 먼저 만들어 보겠습니다.

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-lg-6" id="chartArea">
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>
<script src="chart.js"></script>
</body>
</html>

이렇게하면 모바일 장치에서 전체 화면이되고 대형 화면에서 절반이되는 열이 만들어집니다.

chart.js

var width = document.getElementById('chartArea').clientWidth;
//this allows us to collect the width of the div where the SVG will go.
var height = width / 3.236;
//I like to use the golden rectangle ratio if they work for my charts.

var svg = d3.select('#chartArea').append('svg');
//We add our svg to the div area


//We will build a basic function to handle window resizing.
function resize() {
    width = document.getElementById('chartArea').clientWidth;
    height = width / 3.236;
    d3.select('#chartArea svg')
      .attr('width', width)
      .attr('height', height);
}

window.onresize = resize;
//Call our resize function if the window size is changed.

이것은 매우 단순화 된 예제이지만 차트를 응답 성있게 설정하는 방법에 대한 기본 개념을 다루고 있습니다. resize 함수는 기본 데이터가 업데이트 된 것처럼 모든 경로, 축 및 모양을 다시 그리는 기본 업데이트 함수를 호출해야합니다. 반응 시각화에 관심이있는 대부분의 d3 사용자는 이미 업데이트 이벤트를 소개 주제 및 이 항목 에서처럼 쉽게 호출 할 수있는 함수로 작성하는 방법을 알고 있습니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow