D3.js 를 사용 하여 실시 간 그래 픽 을 구축 하 는 예제 코드
데이터 의 시각 화 는 복잡 한 정 보 를 전달 하 는 가장 효과 적 인 수단 중 하나 로 D3.js 는 이러한 데이터 시각 화 를 만 드 는 강력 한 도구 와 유연성 을 제공 했다.
D3.js 는 SVG,HTML,CSS 를 사용 하여 웹 브 라 우 저 에서 동적 인 대화 형 데 이 터 를 시각 화 하 는 자바 스 크 립 트 라 이브 러 리 입 니 다.
D3 는 각종 간단 하고 사용 하기 쉬 운 함 수 를 제공 하여 자 바스 크 립 트 조작 데이터 의 난이 도 를 크게 간소화 했다.본질 적 으로 자 바스 크 립 트 이기 때문에 자 바스 크 립 트 를 사용 하 는 것 도 모든 기능 을 실현 할 수 있 지만 업 무량 을 크게 줄 일 수 있 습 니 다.특히 데이터 시각 화 에 있어 D3 는 시각 화 된 복잡 한 절 차 를 몇 가지 간단 한 함수 로 간소화 하 였 습 니 다.몇 개의 간단 한 데 이 터 를 입력 하면 각종 화려 한 도형 으로 전환 할 수 있 습 니 다.자 바스 크 립 트 의 기 초 를 가 진 친 구 는 쉽게 이해 할 수 있 을 것 이다.
본 튜 토리 얼 에서 우 리 는 D3.js 와 Pusher Channel 을 어떻게 사용 하여 실시 간 도형 을 구축 하 는 지 연구 할 것 이다.이 튜 토리 얼 을 읽 을 때 코드 를 사용 하려 면 코드 가 포 함 된 최종 버 전GitHub 저장 소을 보십시오.
준비 하 다.
본 튜 토리 얼 을 완성 하려 면 설치Node.js와npm가 필요 합 니 다.내 가 이 강 좌 를 만 들 때 사용 하 는 버 전 은 다음 과 같다.
Pusher지식 은 필요 없 지만,그것 을 익히 면 자 바스 크 립 트 와 D3.js 를 배 우 는 데 도움 이 될 것 이다.
시작 하 다
우선,우리 가 구축 하고 자 하 는 프로그램 에 새 디 렉 터 리 를 만 듭 니 다.실시 간 도형 이나 원 하 는 도형 이 라 고 부 릅 니 다.새로 만 든 디 렉 터 리 에 새로운 index.html 파일 을 만 들 고 다음 코드 를 붙 여 넣 습 니 다.
//index.html
<!DOCTYPE html>
<hml lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" rel="external nofollow" >
<title>Realtime D3 Chart</title>
</head>
<body>
<script src="https://js.pusher.com/4.2/pusher.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="app.js"></script>
</body>
</html>도 표를 실현 하기 전에 style.css 에 응용 프로그램의 스타일 을 추가 합 니 다.
// style.css
html {
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
overflow: hidden;
background: linear-gradient(135deg, #ffffff 0%,#e8f1f5 100%);
}
.container {
position: absolute;
padding: 20px;
top: 50%;
left: 50%;
background-color: white;
border-radius: 4px;
transform: translate(-50%, -50%);
box-shadow: 0px 50px 100px 0px rgba(0,0,102,0.1);
text-align: center;
}
.container h1 {
color: #333;
}
.bar {
fill: #6875ff;
border-radius: 2px;
}
.bar:hover {
fill: #1edede;
}
.tooltip {
opacity: 0;
background-color: rgb(170, 204, 247);
padding: 5px;
border-radius: 4px;
transition: opacity 0.2s ease;
}Node 와 npm 를 설치 했다 고 가정 하면 다음 명령 을 실행 하여 프로그램의 서버 구성 요 소 를 설치 하 는 데 필요 한 모든 의존 항목 을 설치 하 십시오.
npm install express dotenv cors pusherPusher 사이트 에 가서 무료 계 정 을 등록 하 세 요.사 이 드 바 에 있 는 Channel 앱 을 선택 한 다음 Create Channel 앱 을 클릭 하여 새 앱 을 만 듭 니 다.
프로그램 을 만 든 후 API Keys 옵션 에서 증 거 를 검색 한 다음 프로젝트 디 렉 터 리 루트 디 렉 터 리 에 variables.env 파일 을 만 들 고 다음 내용 을 이 파일 에 추가 합 니 다.
// variables.env
PUSHER_APP_ID=<your app id>
PUSHER_APP_KEY=<your app key>
PUSHER_APP_SECRET=<your app secret>
PUSHER_APP_CLUSTER=<your app cluster>현재 저 희 는 관련 의존 항목 을 설치 하고 Pusher 계 정 을 설 치 했 습 니 다.서버 를 구축 할 수 있 습 니 다.
프로젝트 디 렉 터 리 의 루트 디 렉 터 리 에 server.js 라 는 새 파일 을 만 들 고 다음 코드 를 붙 여 넣 습 니 다.
// server.js
require('dotenv').config({ path: 'variables.env' });
const express = require('express');
const cors = require('cors');
const poll = [
{
name: 'Chelsea',
votes: 100,
},
{
name: 'Arsenal',
votes: 70,
},
{
name: 'Liverpool',
votes: 250,
},
{
name: 'Manchester City',
votes: 689,
},
{
name: 'Manchester United',
votes: 150,
},
];
const app = express();
app.use(cors());
app.get('/poll', (req, res) => {
res.json(poll);
});
app.set('port', process.env.PORT || 4000);
const server = app.listen(app.get('port'), () => {
console.log(Express running → PORT ${server.address().port});
});전단 프로그램 설정
응용 프로그램의 전단 은 우리 가 이전에 인용 한 app.js 파일 에 쓰 일 것 입 니 다.프로젝트 디 렉 터 리 의 루트 디 렉 터 리 에 이 파일 을 만 들 고 다음 코드 를 붙 여 넣 습 니 다.
// app.js
// set the dimensions and margins of the graph
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// set the ranges for the graph
const x = d3
.scaleBand()
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear().range([height, 0]);
// append the container for the graph to the page
const container = d3
.select('body')
.append('div')
.attr('class', 'container');
container.append('h1').text('Who will win the 2018/19 Premier League Season?');
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
const svg = container
.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 + ')');
// Create a skeleton structure for a tooltip and append it to the page
const tip = d3
.select('body')
.append('div')
.attr('class', 'tooltip');
// Get the poll data from the /poll endpoint
fetch('http://localhost:4000/poll')
.then(response => response.json())
.then(poll => {
// add the x Axis
svg
.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'x-axis')
.call(d3.axisBottom(x));
// add the y Axis
svg
.append('g')
.attr('class', 'y-axis')
.call(d3.axisLeft(y));
update(poll);
});
function update(poll) {
// Scale the range of the data in the x axis
x.domain(
poll.map(d => {
return d.name;
})
);
// Scale the range of the data in the y axis
y.domain([
0,
d3.max(poll, d => {
return d.votes + 200;
}),
]);
// Select all bars on the graph, take them out, and exit the previous data set.
// Enter the new data and append the rectangles for each object in the poll array
svg
.selectAll('.bar')
.remove()
.exit()
.data(poll)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => {
return x(d.name);
})
.attr('width', x.bandwidth())
.attr('y', d => {
return y(d.votes);
})
.attr('height', d => {
return height - y(d.votes);
})
.on('mousemove', d => {
tip
.style('position', 'absolute')
.style('left', ${d3.event.pageX + 10}px)
.style('top', ${d3.event.pageY + 20}px)
.style('display', 'inline-block')
.style('opacity', '0.9')
.html(
<div><strong>${d.name}</strong></div> <span>${d.votes} votes</span>
);
})
.on('mouseout', () => tip.style('display', 'none'));
// update the x-axis
svg.select('.x-axis').call(d3.axisBottom(x));
// update the y-axis
svg.select('.y-axis').call(d3.axisLeft(y));
}새 터미널 에서 index.html 파일 을 제공 하기 위해 개발 서버 를 시작 합 니 다.
npx http-server이때,당신 의 도 표 는 다음 과 같 아야 합 니 다.
Pusher 를 사용 하여 실시 간 으로 도 표를 업데이트 합 니 다.
폴 링 업 데 이 트 는 Pusher Channel 을 통 해 응용 프로그램의 전단 에 실시 간 으로 반 영 될 수 있 도록 합 니 다.다음 코드 를 app.js 파일 의 끝 에 붙 여 넣 습 니 다.
// app.js
const pusher = new Pusher('<your app key>', {
cluster: '<your app cluster>',
encrypted: true,
});
const channel = pusher.subscribe('poll-channel');
channel.bind('update-poll', data => {
update(data.poll);
});Pusher 계 정 정보 센터 에 있 는 자세 한 정 보 를 사용 하여 대체 자 를 바 꾸 는 것 을 잊 지 마 세 요.
서버 에서 업데이트 실행
1 초 에 한 번 씩 업 데 이 트 된 폴 링 을 모 의 하고 데이터 가 변 할 때 Pusher 를 사용 하여 업 데 이 트 를 촉발 하여 폴 링 구독 자(클 라 이언 트)가 실시 간 으로 업 데 이 트 된 데 이 터 를 받 을 수 있 도록 합 니 다.
다른 가 져 오기 아래 server.js 상단 에 다음 코드 를 추가 합 니 다:
const Pusher = require('pusher');
const pusher = new Pusher({
appId: process.env.PUSHER_APP_ID,
key: process.env.PUSHER_APP_KEY,
secret: process.env.PUSHER_APP_SECRET,
cluster: process.env.PUSHER_APP_CLUSTER,
encrypted: true,
});
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function increment() {
const num = getRandomNumber(0, poll.length);
poll[num].votes += 20;
}
function updatePoll() {
setInterval(() => {
increment();
pusher.trigger('poll-channel', 'update-poll', {
poll,
});
}, 1000);
}
app.get('/poll', (req, res) => {
res.json(poll);
updatePoll();
});프로젝트 디 렉 터 리 의 루트 디 렉 터 리 에서 노드 server.js 를 실행 하여 서버 를 종료 하고 다시 시작 합 니 다.이 때,실시 간 으로 업 데 이 트 된 막대 그래프 가 있어 야 합 니 다.
결론.
D3.js 를 사용 하여 막대 그래프 를 만 드 는 과정 과 Pusher Channel 을 사용 하여 실시 간 으로 막대 그래프 를 만 드 는 방법 을 보 았 습 니 다.
우 리 는 이미 Pusher 와 D3 에 간단 한 용례 를 제 공 했 지만,그 중 하 나 는 단지 표면적 인 문제 일 뿐이다.나 는 깊이 연구docs하여 Pusher 및 기타 기능 에 관 한 정 보 를 더 알 아 볼 것 을 건의 합 니 다.
읽 어 주 셔 서 감사합니다!GitHub 저장 소에서 본 튜 토리 얼 의 전체 소스 코드 를 찾 을 수 있 습 니 다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
W3C 표준:실시 간 으로 CSS 스타일 전환물론 가죽 을 바 꾸 기 전에 W3C 기준 에 따라 웹 사 이 트 를 만 들 고 다른 표현 을 하 는 CSS 두 세트 를 준비 해 야 합 니 다."가죽 바 꾸 기'는 실질 적 으로'CSS 바 꾸 기'입 니 다.우리 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
