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이 사용됩니다. scaleBand 서수 스케일을 사용하여 x축을 만듭니다.
스케일에 대한 이전 이해가 너무 피상적이어서 여기서 몇 가지 작은 실험을 수행했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!