D3.js 를 기반 으로 동적 진도 바 를 그 리 는 인 스 턴 스 상세 설명
D3 의 전 칭 은(Data-Driven Documents)이 며,말 그대로 데이터 에 의 해 작 동 되 는 문서 임 을 알 수 있다.이름 을 들 으 면 추상 적 이 고 간단하게 말하자면 자바 스 크 립 트 의 함수 라 이브 러 리 입 니 다.주로 데이터 시각 화 에 사 용 됩 니 다.만약 당신 이 자 바스 크 립 트 가 무엇 인지 모른다 면,먼저 자 바스 크 립 트 를 배 워 서 완 일 봉 선생님 의 강 좌 를 추천 하 세 요.
자 바스 크 립 트 파일 의 접미사 이름 은 보통.js 이기 때문에 D3 도 D3.js 라 고 부 릅 니 다.D3 는 각종 간단 하고 사용 하기 쉬 운 함 수 를 제공 하여 자 바스 크 립 트 조작 데이터 의 난이 도 를 크게 간소화 했다.본질 적 으로 자 바스 크 립 트 이기 때문에 자 바스 크 립 트 를 사용 하 는 것 도 모든 기능 을 실현 할 수 있 지만 업 무량 을 크게 줄 일 수 있 습 니 다.특히 데이터 시각 화 에 있어 D3 는 시각 화 된 복잡 한 절 차 를 몇 가지 간단 한 함수 로 간소화 하 였 습 니 다.몇 개의 간단 한 데 이 터 를 입력 하면 각종 화려 한 도형 으로 전환 할 수 있 습 니 다.자 바스 크 립 트 의 기 초 를 가 진 친 구 는 쉽게 이해 할 수 있 을 것 이다.
사이트 페이지 로 딩 과 폼 을 제출 할 때 진도 바 를 사용 하여 로 딩 과정 을 표현 하여 사용자 체험 을 최적화 시 킵 니 다.흔히 볼 수 있 는 진도 바 는 직사각형 진도 바 와 원형 진도 바 가 있 습 니 다.다음 그림 과 같 습 니 다.
우 리 는 항상 svg 나 canvas 를 사용 하여 동적 도형 을 그립 니 다.그러나 그리 기 과정 은 상대 적 으로 번 거 롭 습 니 다.직관 적 이 고 아름 다운 진도 조항 에 대해 지역사회 에서 도 성숙 한 방안 을 제공 하 는데 예 를 들 어 하 이 카 트/ECharts 등 이 있 지만 설정 을 바탕 으로 하 는 개발 방식 은 100%의 사용자 정의 그리 기 를 실현 할 수 없다.본 고 는 D3.js 를 사용 하여 0 단계 에서 동적 진도 바 를 실현 하고 코드 논리 원 리 를 공유 할 것 이다.
기초 요구
원형 진도 항목 에 대해 우 리 는 먼저 그것 에 대해 임 무 를 나 누 었 다.
원형 에 대해 svg 는 기 존의 circle 라벨 을 제공 하여 사용 할 수 있 지만 그 약점 은 원형 진도 바 에 대해 circle 을 사용 하면 만족 할 수 있 지만 도형 을 계속 확장 할 때 예 를 들 어 반원 을 그 리 는 등 circle 의 처리 가 까다롭다 는 것 이다.D3.js 는 arc 관련 API 를 제공 하여 원형 그리 기 방법 을 패키지 합 니 다.
var arc = d3.arc()
.innerRadius(180)
.outerRadius(240)
//.startAngle(0)
//.endAngle(Math.PI)
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
<!--html-->
<svg width="960" height="500"></svg>
<script>
var arcGenerator = d3.arc().innerRadius(80).outerRadius(100).startAngle(0);
var picture = d3.select('svg').append('g').attr('transform','translate(480,250)');
</script>1.0 도 를 기점 으로 하 는 원호 구조 기 arcGenerator 생 성
2.transform 도형 오프셋 을 설정 하여 캔버스 중앙 에 도형 을 배치 합 니 다.
현재 캔버스 에는 아직 아무런 요소 가 없 으 며,그 다음 에 우리 의 실제 도형 을 그립 니 다.
var backGround = picture.append("path")
.datum({endAngle: 2 * Math.PI})
.style("fill", "#FDF5E6")
.attr("d", arcGenerator);
첫 번 째 원호 가 그 려 졌 다 면 svg 의 등급 관계 z-index 에 따라 이른바 진도 조 는 1 층 원호 위 에 덮 인 2 층 원호 이다.같은 이치 로 얻 을 수 있다.
var upperGround = picture.append('path')
.datum({endAngle:Math.PI / 2})
.style('fill','#FFC125')
.attr('d',arcGenerator)
2.원심 의 실시 간 데이터 전시
첫 번 째 부분 에서 우 리 는 두 개의 path 를 기반 으로 한 내장 원 을 실현 했다.두 번 째 부분 은 원심 의 실시 간 데이터 전 시 를 실현 합 니 다.진도 바 를 불 러 올 때,우 리 는 원심 에 데 이 터 를 추가 하여 현재 의 불 러 오 는 진 도 를 표현 하고,
var dataText = g.append('text')
.text(12)
.attr('text-anchor','middle')
.attr('dominant-baseline','middle')
.attr('font-size','38px')
3.애니메이션 보 여주 기
1,2 부분 을 통 해 우 리 는 이미 알 고 있다.
다시 말 하면 우 리 는 라디에이터 값 과 수 치 를 바 꾸 는 동시에 변화 과정 을 설정 하 는 데 필요 한 시간 만 있 으 면 이른바'애니메이션'을 실현 할 수 있다.ECharts 가 제공 하 는 공식 인 스 턴 스 에서 setInterval 을 통 해 일정 시간 마다 데이터 업 데 이 트 를 실현 합 니 다.사실은 D3.js 에서 도 비슷 한 방법 으로 setInterval 과 유사 한 기능 을 실현 합 니 다.
d3.interval(function(){
foreground.transition().duration(750).attrTween('d',function(d){
var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
return function(t){
d.endAngle = compute(t);
return arcGenerator(d);
}
})
},1000)
var compute = d3.interpolate(d3.rgb(255,0,0),d3.rgb(0,255,0));
위의 그림 의 div 길이 width 가 100 이 라 고 가정 하면[0,100]을 비례 관계 에 따라[0,10]의 범위 데이터 로 전환 하고 compute 함수 에 입력 하면 특정한 지역 에 대응 하 는 색 을 얻 을 수 있 습 니 다.물론 선형 면적 의 처리 에 대해 우 리 는 분 산 된 데 이 터 를 입력 과 출력 으로 사용 해 서 는 안 되 기 때문에 D3.js 는 더욱 편리 한 선형 그 라 데 이 션 API d3.linear 등 을 제공 하고 여기 서 설명 을 하지 않 습 니 다.
본론 으로 돌아 가면 코드
d3.interpolate(d.endAngle,Math.random() * Math.PI * 2); 는 다음 과 같은 삽입 값 범 위 를 실현 했다.["현재 각도 값","랜 덤 각도 값"]//표현 구간 이 아 닌 배열
그리고 매개 변수 가 t 인 함 수 를 되 돌려 줍 니 다.그러면 이 함수 의 역할 은 무엇 입 니까?
t 매개 변 수 는 d 와 유사 하고 D3.js 내부 에서 실 현 된 삽입 값 이 며 그 범 위 는[0,1]이다.t 매개 변 수 는 설 정 된 duration()시간 에 따라[0,1]에 적당 한 플러그 인 수량 을 자동 으로 계산 하고 플러그 인 결 과 를 되 돌려 선형 안정 적 인 과도 애니메이션 효 과 를 실현 합 니 다.
스크롤 바 의 애니메이션 로드 효 과 를 완성 하고 우 리 는 원심 실시 간 데이터 의 변화 논 리 를 작성 합 니 다.간단 한 할당 만 실현 하면 됩 니 다.전체 코드 는 다음 과 같 습 니 다.
d3.interval(function(){
foreground.transition().duration(750).attrTween('d',function(d){
var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
return function(t){
d.endAngle = compute(t);
var data = d.endAngle / Math.PI / 2 * 100;
//
d3.select('text').text(data.toFixed(0) + '%');
// ，
return arcGenerator(d);
}
})
},2000)
4.미화
1,2,3 부분 에서 우 리 는 가장 기본 적 인 진도 스타일 과 기능 을 실 현 했 지만 스타일 은 단조 로 워 보 였 다.우 리 는 다음 에 진도 스타일 에 대해 선형 그 라 데 이 션 처 리 를 한다.저 희 는 D3.js 가 제공 하 는 선형 플러그 인 API 를 사용 합 니 다.
var colorLinear = d3.scaleLinear().domain([0,100]).range(["#EEE685","#EE3B3B"]);
var color = colorLinear(80);
//color "80%"
d3.interval(function(){
foreground.transition().duration(750).attrTween('d',function(d){
var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
return function(t){
d.endAngle = compute(t);
var data = d.endAngle / Math.PI / 2 * 100;
//
d3.select('text').text(data.toFixed(0) + '%');
// ，
return arcGenerator(d);
}
})
.styleTween('fill',function(d){
return function(t){
var data = d.endAngle / Math.PI / 2 * 100;
//
return colorLinear(data);
}
})
},2000)
종합 적 으로 우 리 는 서로 다른 수치 에서 색채 가 변화 하 는 원형 진도 조 를 실현 하여 경고,알림 등 업무 장면 에 자주 사용 할 수 있다.
직사각형 진행 막대 그리 기
직사각형 진도 바 는 원형 진도 바 에 비해 훨씬 간단 하 다.마찬가지 로 삽입 값 원 리 를 바탕 으로 사각형 의 길 이 를 부 드 럽 게 바 꾸 면 된다.직접 코드 올 리 기:
<head>
<style>
#slider {
height: 20px;
width: 20px;
background: #2394F5;
margin: 15px;
}
</style>
</head>
<body>
<div id='slider'></div>
<script>
d3.interval(function(){
d3.select("#slider").transition()
.duration(1000)
.attrTween("width", function() {
var i = d3.interpolate(20, 400);
var ci = d3.interpolate('#2394F5', '#BDF436');
var that = this;
return function(t) {
that.style.width = i(t) + 'px';
that.style.background = ci(t);
};
});
},1500)
</script>
</body>
총결산
D3.js 를 바탕 으로 진 도 를 그 리 는 관건 은 삽입 값 에 있 고 도형 을 부 드 럽 게 과도 하 는 것 이다.svg 나 순수 css 를 사용 하여 사각형 과 원형 을 실현 해 야 한다 면 물론 가능 하지만 경로 와 애니메이션 의 처리,그리고 css 의 작성 요구 가 많이 복잡 해 졌 다.우 리 는 D3.js 를 사용 하여 상기 두 가지 진 도 를 그 리 는 논리 코드 가 거의 js 를 사용 하여 이 루어 지 는 것 을 관찰 했다.또한 코드 량 은 20 줄 정도 로 제어 하고 포장 하여 재 활용 할 수 있 으 며 이미 매우 세련 되 어 사용자 정의 도표 개발 에 있어 매우 유리 하 다.
진도 조 의 파생 판 계기판 도표 에 대해 기초 진도 조 에 비해 눈금 설명 과 지침 계산 을 추 가 했 으 나 그 종 류 를 떠 나 지 않 고 삽화 원리 와 사용 만 파악 하면 유사 한 도 표를 처리 하 는 것 이 모두 뜻 대로 될 것 이다.
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 D3.js 를 바탕 으로 동적 진도 바 를 그 리 는 실례 에 대한 상세 한 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
