D3.js+Vue 를 사용 하여 간단 한 기둥 그림 을 실현 합 니 다.

최근 Vue 프로젝트 에서 d3.js 를 사용 하여 자주 사용 하 는 도 표를 봉인 하려 고 합 니 다.여기에 자신 이 프로젝트 를 구축 하 는 과정 과 간단 한 기둥 그림 을 실현 하 는 것 을 기록 하 세 요.D3 를 모 르 는 이동D3 Data-Driven Documents데이터 구동 문서 작업 방식 을 바탕 으로 하 는 자바 스 크 립 트 함수 라 이브 러 리 입 니 다.주로 웹 페이지 에서 그림 을 만 들 고 상호작용 도형 을 만 드 는 데 사용 되 며 가장 유행 하 는 시각 화 라 이브 러 리 중 하나 입 니 다.
설명 하 다.

Vue-cli 비계 로 빠 른 구축 프로젝트

npm 설치 D3간단 한 기둥 그림 을 실현 하 다.
프로젝트 구축
vue-cli 를 사용 하여 단일 페이지 를 만 듭 니 다.

#    vue-cli
$ npm install --global vue-cli
#    "webpack"          
$ vue init webpack d3-vue
#     ，    ！
$ cd d3-vue
$ npm run dev

D3 설치(최신 v5 버 전):$ npm install d3 --saveD3 도입:$ import * as d3 from 'd3'간단 한 도 표를 실현 하 다.
1.Vue 에서 dom 요 소 를 가 져 오기
vue 에 서 는 탭 에 ref 속성 을 추가 한 다음 js 에서 this.$refs 를 이용 하여 이 dom 요 소 를 조작 할 수 있 습 니 다.

<template>
 <div>
  <h3>       </h3>
  <svg ref="baseBarChart" class="base-bar-chart"></svg>
 </div>
</template>
//      ...
var chartSvg = d3.select(this.$refs.baseBarChart)

2.도표 데이터 설정
직사각형 그림 의 주요 구성 부분 은 직사각형,좌표 축 과 문자 설명 이 있 고 우리 가 필요 로 하 는 데 이 터 는 도표 의 데이터,도표 의 너비 와 사각형 의 너비 가 있다.

//       ，         
 var chartData = this.chartData
 var width = this.width
 var barHeight = this.barHeight

3.캔버스 추가
그림 을 그 리 려 면 먼저 그림 을 그 리 는 캔버스 가 필요 하 다.D3 는 SVG 도형 의 생 성 기 를 많이 제공 합 니 다.저 희 는 여기 서 SVG 캔버스 를 사용 합 니 다.문서 의 svg 요 소 를 선택 하 십시오.$refs 속성 이 사 용 됩 니 다.

//   
 var chartSvg = d3.select(this.$refs.baseBarChart)
 .attr('width', width)
 .attr('height', barHeight * chartData.length)

4.x 축 비례 자
d3.scale Linear(),선형 비례 척 은 하나의 연속 구간 을 다른 구간 에 투사 한다.그림 을 그 릴 때 제 시 된 데이터 에 따라 직사각형의 너비 에 값 을 부여 하면 한계 가 크다.예 를 들 어 한 그룹의 데이터 에 2000 개의 수치 가 있 는데 우 리 는 2000 개의 픽 셀 로 사각형 의 너 비 를 대표 할 수 없다.왜냐하면 캔버스 가 그렇게 길지 않 기 때문이다.이 럴 때 우 리 는 특정한 지역 의 값 을 다른 지역 에 투사 하고 전환 하 는 과정 에서 크기 관 계 는 변 하지 않 는 다.

// x    
 var xScale = d3.scaleLinear()
 .domain([0, d3.max(chartData)])
 .range([0, width])

5.사각형 과 label 텍스트 의 용기,요소 추가 에 사용
데이터 가 있 지만 충분 한 도형 요소 가 없 을 때 다음 과 같은 체인 방법 으로 충분 한 요 소 를 추가 할 수 있 습 니 다.

selection.selectAll(element).data(data).enter().append(element)
//    label      
var g = chartSvg.selectAll('g')
 .data(chartData)
 .enter().append('g')
 .attr('transform', function (d, i) { return 'translate(0,' + i * barHeight + ')' })

6.사각형 과 label 텍스트 추가

//     
 g.append('rect')
 .attr('width', xScale)
 .attr('height', barHeight - 2)
 .attr('fill', 'green')
 //   label  
 g.append('text')
 .attr('x', function (d) { return xScale(d) + 3 })
 .attr('y', barHeight - 10)
 .attr('dy', '0.3em')
 .attr('fill', 'red')
 .style('font-size', '12px')
 .text(function (d) { return d })

그림%1 개의 캡 션 을 편 집 했 습 니 다.
 
이 구성 요소 사용 하기
우리 가 정의 한 기둥 그림 구성 요 소 를 어떻게 사용 합 니까?3 단계 로 나 누 어 갑 니 다.
1.import 가 져 오기
2.데이터 설정
3.속성 값 을 통 해 하위 구성 요소 에 전달

<base-bar-chart :chart-data="barChart.data" :width="barChart.width" :bar-height="barChart.barHeight"></base-bar-chart>
import BaseBarChart from '../components/base-bar-chart'
export default {
 name: 'BaseBarChartView',
 components: {
  BaseBarChart
 },
 data () {
  return {
   barChart: {
    data: [4, 6, 12, 10, 8, 1, 9],
    width: 540,
    barHeight: 20
   }
  }
 }
}

루트 설정 과 데이터 요청
나머지 부분 은 각 페이지 의 vue-router 경로 설정 과 홈 페이지 의 axios 데이터 요청 입 니 다.

프로젝트 주소:d3-vue
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 D3.js+Vue 를 사용 하여 간단 한 기둥 그림 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다!