D3 — 선 그래프를 사용하여 React 앱에 그래픽 추가하기
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
D3를 사용하면 프런트 엔드 웹 앱에 그래픽을 쉽게 추가할 수 있습니다.
Vue는 널리 사용되는 프론트 엔드 웹 프레임워크입니다.
그들은 함께 잘 작동합니다. 이 기사에서는 D3를 사용하여 Vue 앱에 그래픽을 추가하는 방법을 살펴보겠습니다.
선 그래프
D3를 사용하여 React 앱에 선 그래프를 추가할 수 있습니다.
이를 위해 다음과 같이 작성합니다.
public/data.csv
year,population
2006,20
2008,25
2010,38
2012,41
2014,53
2016,26
2017,42
App.js
import React, { useEffect } from "react";
import * as d3 from "d3";
const createLineChart = async () => {
const margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const valueline = d3
.line()
.x(function (d) {
return x(d.year);
})
.y(function (d) {
return y(d.population);
});
const svg = d3
.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const data = await d3.csv("/data.csv");
data.forEach(function (d) {
d.population = +d.population;
});
x.domain(
d3.extent(data, function (d) {
return d.year;
})
);
y.domain([
0,
d3.max(data, function (d) {
return d.population;
})
]);
svg.append("path").data([data]).attr("class", "line").attr("d", valueline);
svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
svg.append("g").call(d3.axisLeft(y));
};
export default function App() {
useEffect(() => {
createLineChart();
}, []);
return (
<div className="App">
<style>{`
.line {
fill: none;
stroke: green;
stroke-width: 5px;
}
`}</style>
</div>
);
}
꺾은선형 차트를 생성하기 위해
createLineChart
함수를 생성합니다.먼저 다음과 같이 작성합니다.
const margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
차트의 여백, 너비 및 높이를 설정합니다.
그런 다음 라인의 최소값과 최대값을 추가할 수 있도록
x
및 y
개체를 추가합니다.const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0])
그런 다음
x
및 y
축에 대한 데이터를 설정합니다.const valueline = d3
.line()
.x(function(d) {
return x(d.year);
})
.y(function(d) {
return y(d.population);
});
다음으로
svg
요소를 다음을 사용하여 구성 요소에 추가합니다.const svg = d3
.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
그런 다음 다음을 사용하여 CSV에서 데이터를 읽습니다.
const data = await d3.csv("/data.csv");
그런 다음 다음을 사용하여
x
및 y
도메인을 추가합니다.data.forEach(function(d) {
d.population = +d.population;
});
x.domain(
d3.extent(data, function(d) {
return d.year;
})
);
y.domain([
0,
d3.max(data, function(d) {
return d.population;
})
]);
x 및 y 축에 대한 레이블을 반환합니다.
줄을 추가하려면 다음을 작성합니다.
svg.append("path").data([data]).attr("class", "line").attr("d", valueline);
다음을 사용하여 x축을 추가합니다.
svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
그리고 다음과 같이 y축을 추가합니다.
svg.append("g").call(d3.axisLeft(y));
결론
D3가 있는 선 그래프를 React 앱에 추가할 수 있습니다.
게시물Adding Graphics to a React App with D3 — Line Graph이 The Web Dev에 처음 등장했습니다.
Reference
이 문제에 관하여(D3 — 선 그래프를 사용하여 React 앱에 그래픽 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/adding-graphics-to-a-react-app-with-d3-line-graph-3d5a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)