D3.js는 동적 다이얼 효과를 구현합니다.
이번에는 동적 다이얼 효과를 구현하기 위해 D3.js를 가져오겠습니다. D3.js를 사용하여 동적 다이얼 효과를 구현하는 데 있어 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
이 기사에서는 D3.js를 사용하여 간단하고 실용적인 동적 대시보드를 구현하는 예를 소개합니다. 자세한 내용은 다음과 같습니다.
동적 렌더링:
대시보드 렌더링
위의 동적 렌더링을 자세히 살펴보면 다음과 같은 사실을 알 수 있습니다.
값이 새 값으로 변경되면 이는 점진적인 프로세스입니다.
원호 끝에 수직선이 있습니다. 대시보드의 포인터로 사용되는 , 대시보드의 값이 변경되면 유연한 애니메이션 효과가 있습니다.
처음에는 Echarts를 사용하여 대시보드를 구현했지만 위의 두 가지 요구 사항을 충족하지 못했습니다. 그래서 나중에 D3.js를 사용하도록 변경했습니다.
D3.js는 차트를 완벽하게 사용자 정의하고 세부 사항 측면에서 우리의 요구 사항을 완벽하게 충족할 수 있습니다.
대시보드 초기화
1. 먼저 svg 요소를 정의합니다.
<svg id="myGauge" width="80" height="108" ></svg>
그런 다음 초기화를 위한 일부 변수를 선언합니다.
var width=80, height=108, //svg的高度和宽度,也可以通过svg的width、height属性获取 innerRadius = 22, outerRadius = 30, //圆弧的内外半径 arcMin = -Math.PI*2/3, arcMax = Math.PI*2/3, //圆弧的起始角度和终止角度
2. arc 메서드를 만들고 endAngle을 제외한 모든 속성을 설정합니다. 호를 생성할 때 endAngle 속성이 포함된 객체를 이 메서드에 전달하여 주어진 각도에 대한 SVG 경로를 계산합니다.
var arc = d3.arc() .innerRadius(22) .outerRadius(30) .startAngle(arcMin)
원호 각도를 설정하는 방법은 무엇인가요?
원을 시계에 해당하면 12시에 해당하는 각도는 0, 시계 방향 3시에 해당하는 각도는 Math.PI/2, 시계 반대 방향으로 6시에 해당하는 각도는 -Math.PI . 따라서 -Math.PI*2/3에서 Math.PI*2/3까지의 호 모양은 위 렌더링과 같습니다. 자세한 내용은 API 설명서의 arc.startAngle을 참조하세요.
3.SVG 요소를 가져와서 원점을 캔버스 중앙으로 변환하므로 나중에 호를 만들 때 위치를 별도로 지정할 필요가 없습니다.
var svg = d3.select("#myGauge") var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
4. , Unit)
//添加仪表盘的标题 g.append("text").attr("class", "gauge-title") .style("alignment-baseline", "central") //相对父元素对齐方式 .style("text-anchor", "middle") //文本锚点,居中 .attr("y", -45) //到中心的距离 .text("CPU占用率"); //添加仪表盘显示的数值,因为之后还要更新,所以声明一个变量 var valueLabel = g.append("text").attr("class", "gauge-value") .style("alignment-baseline", "central") //相对父元素对齐方式 .style("text-anchor", "middle") //文本锚点,居中 .attr("y", 25) //到中心的距离 .text(12.65); //添加仪表盘显示数值的单位 g.append("text").attr("class", "gauge-unity") .style("alignment-baseline", "central") //相对父元素对齐方式 .style("text-anchor", "middle") //文本锚点,居中 .attr("y", 40) //到中心的距离 .text("%");
Echarts가 그린 Canvas와 비교했을 때,
.gauge-title{ font-size: 10px; fill: #A1A6AD; }
D3에서 제작한 SVG 그래픽의 매우 중요한 장점은 CSS로 SVG 스타일을 정의할 수 있다는 점입니다. 예를 들어 여기 대시보드 제목의 스타일은 다음과 같습니다.
//添加背景圆弧 var background = g.append("path") .datum({endAngle:arcMax}) //传递endAngle参数到arc方法 .style("fill", "#444851") .attr("d", arc);
5. 배경 호 추가
//计算圆弧的结束角度 var currentAngle = percentage*(arcMax-arcMin) + arcMin //添加另一层圆弧,用于表示百分比 var foreground = g.append("path") .datum({endAngle:currentAngle}) .style("fill", "#444851") .attr("d", arc);
6. 백분율은 표시할 백분율이며 0에서 1까지의 소수입니다. .
var tick = g.append("line") .attr('class', 'gauge-tick') .attr("x1", 0) .attr("y1", -innerRadius) .attr("x2", 0) .attr("y2", -(innerRadius + 12)) //定义line位置,默认是在圆弧正中间,12是指针的长度 .style("stroke", "#A1A6AD") .attr('transform', 'rotate('+ angleToDegree(currentAngle) +')')
7 호 끝에 포인터 표시를 추가하세요.
valueLabel.text(newValue)
rotate의 매개변수는 각도이고 Math.PI는 180에 해당하므로 currentAngle을 변환하려면 angleToDegree 메서드를 사용자 정의해야 합니다.
이 시점에서 SVG 대시보드가 생성되었지만 아직은 이 대시보드를 업데이트하는 방법은 무엇입니까?
업데이트 대시보드업데이트 필요: 호는 호 아래의 새로운 백분율 값을 나타냅니다.
호 아래의 값을 수정하는 것은 매우 간단합니다.
//更新圆弧,并且设置渐变动效 foreground.transition() .duration(750) .ease(d3.easeElastic) //设置来回弹动的效果 .attrTween("d", arcTween(angle));
호를 업데이트하는 것은 좀 더 번거롭습니다. 구체적인 아이디어는 호의 endAngle을 수정하고 호 끝에 있는 포인터의 변환 값을 수정하는 것입니다. .
구현 과정에서 API를 사용해야 합니다: selection.transition:
https://
github.com/d3/d3-transition/blob/master/README.md#selection_transition
d3.interpolate: https://github.com/d3/d3-interpolate/blob/master/README.md #interpolate
1. 호를 업데이트합니다. 여기서 각도는 새 호의 끝 각도입니다.
arcTween(newAngle) { let self=this return function(d) { var interpolate = d3.interpolate(d.endAngle, newAngle); //在两个值间找一个插值 return function(t) { d.endAngle = interpolate(t); //根据 transition 的时间 t 计算插值并赋值给endAngle return arc(d); //返回新的“d”属性值 }; }; }
arcTween 메소드는 다음과 같이 정의됩니다. 현재 각도에서 새 각도로 원호 그라데이션을 만드는 d 속성의 트윈(그라디언트) 애니메이션 메서드를 반환합니다.
//更新圆弧末端的指针标记,并且设置渐变动效 tick.transition() .duration(750) .ease(d3.easeElastic) //设置来回弹动的效果 .attrTween('transform', function(){ //设置“transform”属性的渐变,原理同上面的arcTween方法 var i = d3.interpolate(angleToDegree(oldAngle), angleToDegree(newAngle)); //取插值 return function(t) { return 'rotate('+ i(t) +')' }; })
이 방법에 대한 자세한 설명은 Arc Tween의 댓글을 참고해주세요.
2. 호의 끝에서 포인터를 업데이트하는 원리는 위와 동일합니다. 여기서 oldAngle은 이전 호의 끝 각도입니다.
rrreee이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
vue todo-list 구성 요소 사례에 대한 자세한 설명🎜🎜위 내용은 D3.js는 동적 다이얼 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











스마트폰 화면에 녹색 줄이 나타나는 문제를 겪어보셨을 텐데요. 한 번도 본 적이 없더라도 인터넷에서 관련 사진을 본 적이 있을 것입니다. 그렇다면 스마트워치 화면이 하얗게 변하는 상황을 겪어보신 적 있으신가요? CNMO는 지난 4월 2일 외신을 통해 한 Reddit 사용자가 소셜 플랫폼에 삼성 워치 시리즈 스마트워치 화면이 하얗게 변하는 사진을 공유했다는 사실을 접했습니다. 해당 이용자는 "떠날 때 충전 중이었는데, 돌아올 때 이랬다. 재시작을 하려고 했는데, 삼성워치 스마트워치 화면이 하얗게 변했다"고 적었다. Reddit 사용자가 특정 모델을 지정하지 않았습니다. 하지만 사진으로 보면 삼성 워치5가 될 것 같습니다. 이전에 다른 Reddit 사용자도 보고했습니다.

ASSASSIN이라고 하면, 플레이어들은 확실히 "Assassin's Creed"에 나오는 암살의 대가들을 떠올릴 것이라고 생각합니다. 그들은 숙련될 뿐만 아니라 "어둠에 헌신하고 빛을 섬기는" 신념을 가지고 있습니다. 국내에서 잘 알려진 섀시/전원 공급 장치/냉각 가전 브랜드 DeepCool의 ASSASSIN 플래그십 공냉식 라디에이터 시리즈는 서로 일치합니다. 최근 이 시리즈의 최신 제품인 ASSASSIN4S가 출시되었습니다. "Assassin in Suit, Advanced"는 고급 플레이어에게 새로운 공냉식 경험을 선사합니다. 외관은 디테일이 가득합니다. Assassin 4S 라디에이터는 이중 타워 구조 + 단일 팬 내장 디자인을 채택했으며, 외부는 큐브 모양의 페어링으로 덮여 있어 전체적으로 강렬한 느낌을 줍니다. 다양한 컬러를 만나보세요.

봄이 오면 모든 것이 되살아나고 모든 것이 활력과 활력으로 가득 차 있습니다. 이 아름다운 계절에 가정 생활에 색상을 추가하는 방법은 무엇입니까? 정교한 디자인과 뛰어난 비용 효율성을 갖춘 Haqu H2 프로젝터는 올 봄에 없어서는 안 될 아름다움이 되었습니다. 이 H2 프로젝터는 콤팩트하면서도 스타일리시합니다. 거실 TV장 위에 놓거나 침실 침대협탁 옆에 놓아도 아름다운 풍경이 될 수 있습니다. 본체는 유백색 무광택 질감으로 만들어져 있어 프로젝터가 더욱 고급스러워 보일 뿐만 아니라 촉감의 편안함도 향상됩니다. 베이지색 가죽 느낌의 소재가 전체적인 외관에 따뜻함과 우아함을 더해줍니다. 이러한 색상과 소재의 조합은 현대 주택의 미적 트렌드에 부합할 뿐만 아니라 다음과 같은 인테리어에도 통합될 수 있습니다.

ITX 플랫폼은 컴팩트한 크기로 궁극적이고 독특한 아름다움을 추구하는 많은 플레이어를 끌어 모았습니다. 제조 공정의 개선과 기술 발전으로 Intel의 14세대 Core와 RTX40 시리즈 그래픽 카드 모두 ITX 플랫폼에서 강점을 발휘할 수 있으며, 게이머 또한 SFX 전원 공급 장치에 대한 요구 사항이 더 높습니다. 게임 매니아인 Huntkey는 고성능 요구 사항을 충족하는 ITX 플랫폼에서 새로운 MX 시리즈 전원 공급 장치를 출시했습니다. MX750P 풀 모듈 전원 공급 장치는 최대 750W의 정격 전력을 가지며 80PLUS 플래티넘 레벨 인증을 통과했습니다. 아래에서는 이 전원 공급 장치에 대한 평가를 가져옵니다. Huntkey MX750P 풀 모듈 전원 공급 장치는 심플하고 패셔너블한 디자인 컨셉을 채택하고 있으며 플레이어가 선택할 수 있는 두 가지 흑백 모델이 있습니다. 둘 다 무광택 표면 처리를 사용하고 은회색과 빨간색 글꼴로 질감이 좋습니다.

PDF, 웹페이지, 포스터, 엑셀 차트의 내용을 자동으로 분석할 수 있는 대형 모델은 파트타임 근로자에게 그다지 편리하지 않습니다. Shanghai AILab, 홍콩 중문대학교 및 기타 연구 기관에서 제안한 InternLM-XComposer2-4KHD(약칭 IXC2-4KHD) 모델은 이를 현실로 만듭니다. 해상도 제한이 1500x1500 이하인 다른 다중 모드 대형 모델과 비교하여, 이 작업은 다중 모드 대형 모델의 최대 입력 이미지를 4K(3840x1600) 이상의 해상도로 높이고 모든 화면비와 336픽셀을 4K로 지원합니다. 동적 해상도가 변경됩니다. 모델은 출시 3일 만에 허깅페이스 비주얼 질문답변 모델 인기 순위 1위를 차지했다. 취급이 용이함

급속한 기술 발전이 이루어지는 현 시대에 노트북은 사람들의 일상 생활과 업무에 없어서는 안 될 중요한 도구가 되었습니다. 높은 성능을 요구하는 플레이어의 경우 강력한 구성과 탁월한 성능을 갖춘 노트북이 하드코어 요구 사항을 충족할 수 있습니다. 뛰어난 성능과 눈부신 디자인을 갖춘 컬러풀 히든스타 P15 노트북은 하드코어 노트북의 대명사라 할 수 있는 미래의 선두주자로 자리매김했습니다. 컬러풀 히든스타(Colorful Hidden Star) P1524는 13세대 인텔 코어 i7 프로세서와 RTX4060노트북 GPU를 탑재해 더욱 패셔너블한 우주선 디자인 스타일을 채택해 세부적으로 뛰어난 성능을 자랑한다. 먼저 이 노트북의 특징을 살펴보겠습니다. Supreme은 Intel Core i7-13620H 프로세서로 구동됩니다.

오늘날 스마트폰 시장에서 화면 품질은 휴대폰의 전반적인 성능을 측정하는 주요 지표 중 하나가 되었습니다. iQOO의 Neo 시리즈는 항상 사용자에게 뛰어난 게임 경험과 시각적 즐거움을 제공하기 위해 노력해 왔습니다. 최신 제품인 iQOO Neo9SPro+는 "Three Good Eye Protection Gaming Screen"을 사용합니다. 다음으로 이 화면의 품질이 얼마나 뛰어난지 살펴보겠습니다. iQOO Neo9S Pro+에는 1Hz~144Hz의 플래그십 LTPO 적응형 새로 고침 빈도를 지원하는 1.5 KOLED e스포츠 다이렉트 화면이 장착되어 있어 정적 콘텐츠를 표시할 때 초저전력 대기 상태를 달성할 수 있으며 지능적일 수도 있습니다. 게임 중에는 90Hz에서 144Hz로 동적 높음으로 전환합니다.

많은 사진 애호가들은 렌즈 사용을 좋아합니다. 촬영 요구 사항은 매우 다양하기 때문에 렌즈 선택에 있어서는 보다 다양한 기능을 갖춘 제품, 즉 일반적으로 "세계를 정복하는 하나의 렌즈" 렌즈를 선호합니다. 마침 Nikon이 진정한 "세계를 정복할 수 있는 하나의 렌즈" 렌즈인 NIKKOR Z28-400mmf/4-8VR 렌즈 신제품을 출시했습니다. 렌즈는 28mm 광각 끝부터 400mm 망원 끝까지 커버합니다. Z 마운트 카메라가 장착되어 매우 다양한 사진 테마를 쉽게 촬영하고 풍부한 관점 변화를 가져올 수 있습니다. 오늘은 최근 사용 경험을 통해 NIKKOR Z28-400mmf/4-8VR 렌즈에 대해 이야기해보겠습니다. NIKKOR Z28-400mmf/4-8VR은
