d3.js を使用してカスタムの複数 Y 軸折れ線グラフを実装する手順の詳細な説明

今回は、d3.js でカスタムの複数 Y 軸の折れ線グラフを実装する手順について詳しく説明します。 d3.js でカスタムの複数の Y 軸の折れ線グラフを実装するための 注意事項 について説明します。 . 以下は実際的なケースですので見てみましょう。

はじめに

要件は、バイタルサインの体温シートを実装することです。X 軸はタイムラインであり、Y 軸には複数の物理的サイン項目があります。この効果は特に複雑ではありませんが、業界の特殊性により容易に利用できないため、d3.js を使用して複数の Y 軸の折れ線グラフを実装します。

基本

この図では、d3.js の最も基本的な使用法の一部のみを使用しており、データ量が比較的少ないため、凝った使用法は使用していません。スケール、軸、線と点を描き、最後にズーム効果を追加します。

効果

オンラインプレビュー

具体的な実装

1. SVGをコンテナとして初期化すると、すべての点、線、および面がこのコンテナに描画されます

svg.select('#id')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

2スケール scale を定義し、ドメイン domain で表示されるスケール範囲を定義し、値ドメイン range で実際のデータスケールを定義します scale ，定义域 domain 显示的刻度范围,值域 range 实际数据刻度

// x轴以时间为刻度
this.x = d3
 .scaleTime()
 .domain([this.beginTime, this.endTime])
 .range([0, this.width]);
// y轴按照像素值为刻度，所有数据需按照比例转换计算
this.y = d3
 .scaleLinear()
 .domain([0, this.height])
 .range([this.height, 0]);

3.定义轴 axis , axis 需要和 scale 结合使用，作为参数传入 axis(scale) 。

其中， ticks 表示刻度数量，传入数值即可，注意一点， ticks 默认会取 2,5,10 这三个数中的一个，如果你传入一个其他的数，它会根据实际尺寸找一个接近的值（这里还涉及到倍数情况下，详细了解可查阅官方api）；

如果刻度想要自定义需要利用 tickValues([NO1,NO2,NO3...]) 实现； tickSize

this.xAxis = d3
 .axisTop(this.x)
 // .ticks(d3.timeHour.every(4))
 .tickValues(d3.timeHour.range(this.beginTime, this.endTime, 4))
 .tickSize(this.height)
 .tickFormat(function (d, i) {
  // return d.getHours();
  return;
 });
this.yAxis = d3
 .axisLeft()
 .scale(this.y)
 .tickValues(d3.range(0, this.height, this.height / 40))
 .tickSize(-this.width)
 .tickFormat(function (d, i) {
  return;
 });

3軸 axis を定義します。 axis は scale と組み合わせて使用​​し、 axis(scale) に渡す必要があります。パラメータとして。

このうち、ticks はティックの数を表します。デフォルトでは、ティックは 3 つの数値 2、5、10 のいずれかを取ることに注意してください。別の数値を渡すと、実際のサイズに基づいて近い値が見つかります (これには倍数も含まれます。詳細については公式 API を参照してください)

スケールをカスタマイズしたい場合は、 checkValues( [NO1,NO2,NO3...]) 実装; tinySize は、コンテナ svg の幅と高さに設定することでフルスケールを実現します。ルーラー効果。

// 折线模板
this.line = d3
 .line()
 .x(function (d) {
  return that.x(d.datetime);
 })
 .y(function (d) {
  return that.y(d.svgValue);
 });

4. ポリラインテンプレートを定義します

rrreee

5. 以上でキャンバスの基本的な

フレームワーク

が完成しました。残りはデータのレンダリングです。

このテーブルでは、上部のタイムラインと左側の y 軸がカスタマイズされており、最初に軸を描画するためにコンテナー内に 2 つの領域が割り当てられ、コンテナーの幅と高さに比例して実装されます。 。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:

js を使用してページタグの数を数える方法

🎜🎜JS リフレクションと依存関係注入のユースケース分析🎜🎜🎜

以上がd3.js を使用してカスタムの複数 Y 軸折れ線グラフを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。