집 > 기사 > 웹 프론트엔드 > Vue 프로젝트에서 d3.js를 사용하는 방법

Vue 프로젝트에서 d3.js를 사용하는 방법

php中世界最好的语言원래의: 2018-06-01 13:56:062854검색

이번에는 Vue 프로젝트에서 d3.js를 사용하는 방법을 알려드리겠습니다. Vue 프로젝트에서 d3.js를 사용할 때 주의사항은 무엇인가요?

이전에 작성한 데모에서 일부 효과를 얻기 위해 d3를 사용했지만 많은 포럼에서 리소스를 검색할 때 Vue에서 D3.js를 사용할 수 있는 방법을 찾을 수 없었습니다. 상대적으로 비인도적인데 웹팩에서 D3.js를 어떻게 사용하는지 전혀 이야기하지 않았습니다

드디어 오랜 고민 끝에 외국인 상사가 그의 사례를 보고 Vue 프로젝트에서 D3 사용을 성공적으로 구현하는 것을 보았습니다

Firstinstall

npm install d3 --save-dev

만약을 대비해 package.json을 보세요

설치 완료

시작하기 전에 일반 D3 DOM 조작을 사용하는 Vue 컴포넌트를 렌더링하여 간단한 선 차트를 렌더링해 보겠습니다. :

<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
 name: 'non-vue-line-chart',
 template: '<p></p>',
 mounted() {
  const svg = d3.select(this.$el)
   .append('svg')
   .attr('width', 500)
   .attr('height', 270)
   .append('g')
   .attr('transform', 'translate(0, 10)');
  const x = d3.scaleLinear().range([0, 430]);
  const y = d3.scaleLinear().range([210, 0]);
  d3.axisLeft().scale(x);
  d3.axisTop().scale(y);
  x.domain(d3.extent(data, (d, i) => i));
  y.domain([0, d3.max(data, d => d)]);
  const createPath = d3.line()
   .x((d, i) => x(i))
   .y(d => y(d));
  svg.append('path').attr('d', createPath(data));
 },
};
</script>
<style lang="sass">
svg
 margin: 25px;
 path
  fill: none
  stroke: #76BF8A
  stroke-width: 3px
</style>

Code 간단하고 이해하기 쉽지만 이것은 단지 기본적인 예일 뿐입니다. 템플릿을 사용하지 않기 때문에 더 많은 작업과 계산이 필요한 더 복잡한 시각화는 구성 요소의 디자인과 논리를 모호하게 만듭니다. 위 접근 방식의 또 다른 주의 사항은 D3가 DOM에 요소를 동적으로 추가하기 때문에 범위가 지정된 CSS 속성을 사용할 수 없다는 것입니다.

이상하지만 우아한 코딩 방식으로 구현할 수 있습니다.

<template>
 <svg width="500" height="270">
  <g style="transform: translate(0, 10px)">
   <path :d="line" />
  </g>
 </svg>
</template>
<script>
import * as d3 from 'd3';
export default {
 name: 'vue-line-chart',
 data() {
  return {
   data: [99, 71, 78, 25, 36, 92],
   line: '',
  };
 },
 mounted() {
  this.calculatePath();
 },
 methods: {
  getScales() {
   const x = d3.scaleTime().range([0, 430]);
   const y = d3.scaleLinear().range([210, 0]);
   d3.axisLeft().scale(x);
   d3.axisBottom().scale(y);
   x.domain(d3.extent(this.data, (d, i) => i));
   y.domain([0, d3.max(this.data, d => d)]);
   return { x, y };
  },
  calculatePath() {
   const scale = this.getScales();
   const path = d3.line()
    .x((d, i) => scale.x(i))
    .y(d => scale.y(d));
   this.line = path(this.data);
  },
 },
};
</script>
<style lang="sass" scoped>
svg
 margin: 25px;
path
 fill: none
 stroke: #76BF8A
 stroke-width: 3px
</style>

매우 멋지네요. 속성을 노출하지 않고 데이터가 하드코딩되어 있음에도 불구하고 뷰와 로직을 훌륭하게 분리하고 Vue를 사용하여 Hooks, Methods 및 dataobjects, 현상은 위 그림과 동일합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!