이를 설명하기 위해 rcl_january_2015_clean.csv 파일의 첫 세 항목을 처리합시다. 이들은 동일한 연도의 제조를 가진 2013 년, 2014 년 및 2015 년의 MCI의 J4500이 동일한 결함을 제시한다는 점에서 한 줄로 분류 할 수 있습니다. 영향을받는 잠재적 인 단위는 이미 데이터 세트 에서이 세 가지 모델을 함께 그룹화합니다.
rcl_january_2015_json.csv
<span>{
</span> <span>"items": [
</span> <span>{
</span> <span>"item": {
</span> <span>"date": "",
</span> <span>"models": [
</span> <span>""
</span> <span>],
</span> <span>"units": "",
</span> <span>"defect": "",
</span> <span>"consequence": "",
</span> <span>"corrective": ""
</span> <span>}
</span> <span>}
</span> <span>]
</span><span>}</span>d3<span>.csv("RCL.csv", function (data) {
</span> <span>// process the data
</span><span>});</span>
data <span>= [
</span> <span>{
</span> <span>'Record creation date':'20150105',
</span> <span>'Maker':'MCI',
</span> <span>'Potential number of units affected':'109',
</span> <span>'JSON data': '{
</span> <span>"items":[
</span> <span>{
</span> <span>"item": {
</span> <span>"date":"January, 5 2015",
</span> <span>"models":[
</span> <span>"J4500 (years 2013, 2014, 2015) ..."
</span> <span>],
</span> <span>"units":"109",
</span> <span>"defect":"...",
</span> <span>"consequence":"...",
</span> <span>"corrective":"..."
</span> <span>}
</span> <span>}
</span> <span>]
</span> <span>}'
</span> <span>},
</span> <span>...
</span><span>];</span>
<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>
결론
딤플 차트에 상호 작용을 추가 할 수 있습니까?
누락 또는 일관성이없는 데이터 처리는 데이터 시각화의 중요한 부분입니다. Dimple은 이러한 데이터를 다루는 몇 가지 방법을 제공합니다. Dimple.filterData () 메소드를 사용하여 원치 않는 값을 필터링하거나 Dimple.AddMeAsureAxis () 메소드를 사용하여 데이터를 집계하고 결 측값을 채울 수 있습니다. D3의 데이터 조작 기능을 사용하여 데이터를 시각화하기 전에 데이터를 정리하고 전처리 할 수 있습니다. DIMPLE 및 D3을 사용하여 산점도를 생성 할 수 있습니까?
Dimple 및 D3으로 막대 차트를 작성하려면 라인 차트를 만드는 것과 비슷한 단계가 필요합니다. 데이터를로드하고 SVG 객체를 만들고 새 딤플 차트를 만들어야합니다. 그러나 선을 추가하는 대신 Dimple.addseries () 메소드를 사용하여 막대를 추가합니다. 또한 막대 모양을 사용자 정의하고 필요에 따라 상호 작용을 추가 할 수 있습니다.
이미지 또는 pdf 캔으로 딤플 차트를 내보낼 수 있습니다. 데이터 시각화를 공유하거나 제시하는 데 유용합니다. D3의 Node () 메소드를 사용하여 차트의 SVG 요소를 가져온 다음 CANVG 또는 JSPDF와 같은 라이브러리를 사용하여 SVG를 이미지 또는 PDF로 변환 할 수 있습니다. 추가 설정 및 종속성이 필요할 수 있습니다.
딤플 차트를 애니메이션하면 데이터 시각화가보다 매력적이고 역동적 일 수 있습니다. D3의 전환 방법을 사용하여 데이터의 변화 또는 차트의 모양을 애니메이션 할 수 있습니다. 예를 들어, 데이터가 변경 될 때 한 상태에서 다른 상태로 부드럽게 전환하기 위해 라인 차트의 라인을 애니메이션 할 수 있습니다. Dimple 및 D3을 사용하여 원형 차트를 만들 수 있습니까?
DIMPLE과 D3을 사용하여 파이 차트를 작성하면 유사한 단계가 포함됩니다. 다른 유형의 차트 생성에. 데이터를로드하고 SVG 객체를 만들고 새 딤플 차트를 만들어야합니다. 그러나 선, 막대 또는 점을 추가하는 대신 Dimple.addseries () 메소드를 사용하여 파이를 추가합니다. 또한 파이의 모양을 사용자 정의하고 필요에 따라 상호 작용을 추가 할 수 있습니다.
위 내용은 Dimple과 D3을 사용하여 JavaScript에서 데이터 시각화를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
