D3.js를 사용한 막대 차트

D3(또는 D3.js)는 웹 표준을 사용하여 데이터를 시각화하기 위한 JavaScript 라이브러리입니다. D3는 SVG, Canvas 및 HTML을 사용하여 데이터에 생명을 불어넣도록 도와줍니다. D3는 강력한 시각화 및 상호 작용 기술을 DOM 조작에 대한 데이터 중심 접근 방식과 결합하여 최신 브라우저의 모든 기능과 데이터에 적합한 시각적 인터페이스를 자유롭게 설계할 수 있도록 합니다.
npm을 사용하는 경우 npm은 d3을 설치합니다. GitHub에서 최신 릴리스를 다운로드할 수도 있습니다. 최신 브라우저의 바닐라 HTML의 경우 Skypack에서 D3를 가져옵니다.

<script type="module">

import * as d3 from "https://cdn.skypack.dev/d3@7";

const div = d3.selectAll("div");

</script>

레거시 환경의 경우 jsDelivr와 같은 npm 기반 CDN에서 D3의 UMD 번들을 로드할 수 있습니다. d3 전역이 내보내집니다.

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>

const div = d3.selectAll("div");

</script>

독립 실행형 D3 마이크로라이브러리를 사용할 수도 있습니다. 예를 들어, d3 선택:

<script type="module">

import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";

const div = selectAll("div");

</script>

먼저 namse로 3개의 폴더를 생성합니다: index.html, index.css,index.js
그런 다음 index.html을 열고 다음 코드를 작성합니다.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Learn D3.js</title>
    </head>
    <body>
        <h1>Bar Chart using D3.js</h1>

        <svg class="bar-chart"></svg>

        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

그런 다음 index.css를 열고 다음 코드를 복사합니다.

.bar-chart {
    background-color: #C7D9D9;
    }

.bar {
     fill: #115D8C;
     }

마지막으로 이 코드를 index.js에 복사합니다.

 // javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / dataset.length);


var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
         return svgHeight - d 
    })
    .attr("height", function(d) { 
        return d; 
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0]; 
        return "translate("+ translate +")";
    });

결과는 다음과 같습니다.

데이터 세트 번호가 너무 작으면 어떻게 될까요?
선형 차트처럼 보이는 매우 작은 막대 차트가 있습니다. 이 위치에서 스케일을 사용해야 합니다.

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(dataset)])
  .range([0, svgHeight]);
var barChart = svg
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("y", function (d) {
    return svgHeight - yScale(d);
  })
  .attr("height", function (d) {
    return yScale(d);
  })

자바스크립트
막대 차트 축의 경우 d3는 4가지 방법을 제공합니다.
d3.axisTop()
d3.axisRight()
d3.axisBottom()
d3.axisLeft()

// javascript

var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500,
  svgHeight = 300;

var svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight);

var xScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgWidth]);

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([svgHeight, 0]);

var x_axis = d3.axisBottom().scale(xScale);

var y_axis = d3.axisLeft().scale(yScale);

svg.append("g").attr("transform", "translate(50, 10)").call(y_axis);

var xAxisTranslate = svgHeight - 20;

svg
  .append("g")
  .attr("transform", "translate(50, " + xAxisTranslate + ")")
  .call(x_axis);

결과는 다음과 같습니다.

Reference

이 문제에 관하여(D3.js를 사용한 막대 차트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sababg/bar-chart-using-d3js-3nfd

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

D3.js를 사용한 막대 차트

Reference

좋은 웹페이지 즐겨찾기