今回は、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; });
axis
を定義します。 axis
は scale
と組み合わせて使用し、 axis(scale)
に渡す必要があります。パラメータとして。 このうち、ticks
はティックの数を表します。デフォルトでは、ティックは 3 つの数値 2、5、10
のいずれかを取ることに注意してください。別の数値を渡すと、実際のサイズに基づいて近い値が見つかります (これには倍数も含まれます。詳細については公式 API を参照してください)
// 折线模板 this.line = d3 .line() .x(function (d) { return that.x(d.datetime); }) .y(function (d) { return that.y(d.svgValue); });
rrreee
5. 以上でキャンバスの基本的なフレームワーク
が完成しました。残りはデータのレンダリングです。 このテーブルでは、上部のタイムラインと左側の y 軸がカスタマイズされており、最初に軸を描画するためにコンテナー内に 2 つの領域が割り当てられ、コンテナーの幅と高さに比例して実装されます。 。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がd3.js を使用してカスタムの複数 Y 軸折れ線グラフを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。