d3.js
応答性の高いd3.jsグラフの作成方法

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

構文

var width = document.getElementById（ 'chartArea'）。クライアントの幅。
var height = width / 3.236;
window.onresize = resizeFunctionCall;

ブートストラップの使用

1つの方法として、ブートストラップのグリッドフレームワークを使用して、チャートが存在する領域を定義する方法があります。これをclientWidth変数とwindow.onresizeイベントとともにclientWidthすると、応答性の高い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