Vue에 d3를 설치하고 순서도를 만드는 방법

최근 몇 년간 프론트엔드 개발의 주류 기술 프레임워크 중 하나인 vue.js가 점점 더 많은 관심과 사랑을 받고 있습니다. 동적 데이터 기반 JavaScript 라이브러리인 d3.js는 다양한 데이터 시각화 시나리오에서도 널리 사용됩니다. vue.js 애플리케이션에서 d3.js를 설치하고 사용하는 방법은 무엇입니까? 이번 글에서는 Vue 설치 d3의 흐름도를 소개하겠습니다.

1단계: d3.js 설치

먼저, npm 패키지 관리자를 통해 vue.js 프로젝트에 d3.js 라이브러리를 설치해야 합니다. 터미널을 열고 프로젝트가 있는 디렉터리를 입력한 후 다음 명령을 입력합니다.

npm install d3

이렇게 하면 d3.js 라이브러리가 프로젝트의 node_modules 디렉터리에 자동으로 다운로드되어 설치됩니다.

2단계: d3.js 라이브러리 소개

d3.js 라이브러리 설치가 완료되면 프로젝트에서 사용하기 위해 vue.js 컴포넌트에 이를 도입해야 합니다. d3.js를 도입해야 하는 컴포넌트를 열고 상단에 다음 코드를 추가합니다.

import * as d3 from "d3";

이렇게 하면 d3.js 라이브러리가 성공적으로 도입되었으며 d3.js의 다양한 API를 사용할 수 있습니다.

3단계: 순서도 만들기

다음으로 d3.js를 사용하여 vue.js에서 차트를 그리는 방법을 더 잘 이해할 수 있도록 간단한 순서도를 만들어 보겠습니다.

먼저 다음 코드를 구성 요소에 추가하여 SVG 보기를 만듭니다.

created() {
  this.svg = d3
    .select('svg')
    .attr('width', this.width)
    .attr('height', this.height);
},
render() {
  return <svg></svg>;
},

이 예에서는 데이터 개체 svg를 정의하고 d3.select() 메서드를 사용하여 SVG 요소를 선택한 다음 attr 속성을 사용합니다. SVG 요소의 너비와 높이를 반응형 데이터 개체에 정의된 값으로 설정합니다.

다음으로 데이터 컬렉션과 해당 노드를 생성하고 연결합니다. 구성 요소의 탑재된 수명 주기 후크 기능에 다음 코드를 추가합니다.

mounted() {
  const dataset = {
    nodes: [
      { name: 'A' },
      { name: 'B' },
      { name: 'C' },
      { name: 'D' },
    ],
      edges: [
        { source: 0, target: 1 },
        { source: 1, target: 2 },
        { source: 2, target: 3 },
      ],
  };
  const nodes = this.svg.selectAll('circle')
    .data(dataset.nodes)
    .enter()
    .append('circle')
    .attr('cx', 100)
    .attr('cy', d => d.name.charCodeAt() * 10)
    .attr('r', 20)
    .style('fill', 'white')
    .style('stroke', 'black');
  const edges = this.svg.selectAll('line')
    .data(dataset.edges)
    .enter()
    .append('line')
    .attr('x1', d => nodes._groups[0][d.source].attributes.cx.value)
    .attr('y1', d => nodes._groups[0][d.source].attributes.cy.value)
    .attr('x2', d => nodes._groups[0][d.target].attributes.cx.value)
    .attr('y2', d => nodes._groups[0][d.target].attributes.cy.value)
    .attr('stroke', 'black')
    .attr('stroke-width', 1);
},

이 예에서는 d3.js의 API를 사용하여 SVG 보기에 ​​4개의 노드와 이를 연결하는 3개의 링크를 포함하는 데이터 수집 데이터 세트를 생성합니다. . 옆.

d3.js 선택기와 데이터 바인딩 방법을 계속 사용하여 데이터를 원형 노드로 표시하고 직선으로 연결합니다. 마지막으로 노드의 cx, cy 속성을 정의하여 노드의 위치를 ​​결정하고, 스트로크 속성으로 가장자리의 색상과 두께를 설정합니다.

4단계: 코드 실행

마지막으로 코드를 실행하여 순서도가 정상적으로 그려지는지 확인합니다. 터미널에서 다음 명령을 실행하세요:

npm run serve

브라우저에서 주소를 엽니다: http://localhost:8080, 그려진 흐름도를 볼 수 있습니다.

결론:

d3.js를 사용하는 과정에서 개발자는 다양하고 복잡한 데이터 시각화 차트를 그리기 위해 일련의 API를 마스터해야 합니다. 하지만 vue.js 애플리케이션에서는 npm을 통해 d3.js 라이브러리를 쉽게 설치 및 도입할 수 있고, 흐름도를 빠르게 구축할 수 있으며, vue.js의 데이터 바인딩 기능을 통해 뷰를 동적으로 업데이트하는 효과를 얻을 수 있습니다.

위 내용은 Vue에 d3를 설치하고 순서도를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!