d3.js を使用して完全な縦棒グラフを作成するコードの紹介

この記事では、d3.js を使用して完全な縦棒グラフを作成するためのコードを紹介します。これには一定の参考値があります。必要な友人は参照できます。お役に立てれば幸いです。

d3js.org v5.9.2

以前は、各部分のデモにすぎませんでしたが、今ではすべての部分を統合し、多くのことを学んだことがわかりました

主にスケールの理解

コード

スタイルとデータ

最初にスタイル

<style>
    rect {
        fill: pink
    }
    text {
        font-size: 10px;
    }
</style>

次にデータとヒストグラムの幅と高さ##についての理解を深めます。 #

const
    data = [3, 6, 10, 25],
    barWidth = 100,
    barHeight = 300,
    padding = { //svg留白用
        top: 100,
        right: 100,
        bottom: 100,
        left: 100
    };

スケールを作成する

実践後、スケールと座標軸についての理解が少し深まりました

let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]),
    yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),//y轴使用线性比例尺，注意domain输入域
    xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]); //x轴使用scaleBand比例尺

barScaleを使用して縦棒グラフを作成します

yAxisScaleはy 軸の作成に使用されます。domain() 入力フィールドに注意してください。そうでないと、スケール値の配置が逆になります。
xAxisScale は、x 軸の作成に使用されます。scaleBand 順序スケールを使用します。
私のこれまでの理解スケールは表面的すぎたので、ここでいくつかの小さな実験も行いました

console.log(`barScale(0)：` + barScale(0));
console.log(`yAxisScale(0)：` + yAxisScale(0));
console.log(`xAxisScale(2)：` + xAxisScale(2));

次のように表示されます

barScale および yAxisScale、入力ドメインが逆であるため、マッピングも逆であり、この記事は素晴らしいです。概要は記事の最後にあります。

ヒストグラムの作成

let barContainer = d3.select('.chart')
    .attr('width', data.length * barWidth + padding.left + padding.right)
    .attr('height', barHeight + padding.top + padding.bottom)
    .selectAll('g')
    .data(data).enter().append('g')
    .attr('transform', (d, i) => {
        return 'translate(' + (padding.left + i * barWidth) + ',' + (padding.top + barHeight - barScale(d)) + ')'
    });
barContainer.append('rect')
    .attr('height', d => barScale(d))
    .attr('width', barWidth - 1);
barContainer
    .append('text')
    .text(d => d)
    .attr('y', 10)
    .attr('x', barWidth / 2 - 5);

値前に定義したパディング オブジェクトの空白の一部を残すために使用されます。

座標軸の作成

/**
 * 创造y轴
 */
let yAxis = d3.axisLeft(yAxisScale);
d3.select('.chart')
    .append('g')
    .attr('transform', 'translate(' + (padding.left - 10) + ',' + padding.top + ') ')
    .call(yAxis);
/**
 * 创建X轴
 */
let xAxis = d3.axisBottom(xAxisScale);
d3.select('.chart')
    .append('g')
    .attr('transform', 'translate(' + (padding.left) + ',' + (padding.top + barHeight) + ')')
    .call(xAxis);

最後に座標軸を作成します

[関連する推奨事項:

JavaScript ビデオ チュートリアル ]

以上がd3.js を使用して完全な縦棒グラフを作成するコードの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。