Cara memasang d3 dalam vue dan mencipta carta alir

Dalam beberapa tahun kebelakangan ini, vue.js, sebagai salah satu rangka kerja teknikal arus perdana dalam pembangunan bahagian hadapan, telah menarik lebih banyak perhatian dan kasih sayang. Sebagai perpustakaan JavaScript dipacu data dinamik, d3.js juga digunakan secara meluas dalam pelbagai senario visualisasi data. Bagaimana untuk memasang dan menggunakan d3.js dalam aplikasi vue.js? Artikel ini akan memperkenalkan carta alir pemasangan vue d3.

Langkah 1: Pasang d3.js

Mula-mula, anda perlu memasang perpustakaan d3.js dalam projek vue.js, yang boleh dicapai melalui pengurus pakej npm. Buka terminal, masukkan direktori di mana projek itu terletak dan masukkan arahan berikut:

npm install d3

Ini akan memuat turun dan memasang perpustakaan d3.js secara automatik ke direktori node_modules dalam projek.

Langkah 2: Perkenalkan perpustakaan d3.js

Dengan pemasangan perpustakaan d3.js selesai, kami perlu memperkenalkannya dalam komponen vue.js untuk menggunakannya dalam projek. Buka komponen yang perlu memperkenalkan d3.js, dan tambah kod berikut di bahagian atas:

import * as d3 from "d3";

Dengan cara ini, perpustakaan d3.js telah berjaya diperkenalkan dan anda boleh mula menggunakan pelbagai API d3.js.

Langkah 3: Buat carta alir

Seterusnya, mari buat carta alir mudah untuk lebih memahami cara melukis carta dalam vue.js menggunakan d3.js.

Pertama, tambahkan kod berikut pada komponen untuk mencipta paparan SVG:

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

Dalam contoh ini, kami mentakrifkan objek data svg dan menggunakan kaedah d3.select() An Elemen SVG dipilih dan atribut attr digunakan untuk menetapkan lebar dan ketinggian elemen SVG kepada nilai yang ditakrifkan dalam objek data responsif.

Seterusnya, buat pengumpulan data dan nodnya, dan wayarkannya. Dalam fungsi cangkuk kitaran hayat yang dipasang komponen, tambahkan kod berikut:

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);
},

Dalam contoh ini, kami menggunakan API d3.js untuk mencipta set data pengumpulan data dalam paparan SVG, termasuk empat nod dan tiga tepi yang menghubungkannya.

Teruskan gunakan pemilih d3.js dan kaedah pengikatan data untuk memaparkan data sebagai nod bulat dan menyambungkannya dengan garis lurus. Akhir sekali, kedudukan nod ditentukan dengan mentakrifkan atribut cx dan cy nod, dan warna dan ketebalan tepi ditetapkan oleh atribut lejang.

Langkah 4: Jalankan kod

Akhir sekali, jalankan kod untuk melihat sama ada carta alir dilukis seperti biasa. Jalankan arahan berikut dalam terminal:

npm run serve

Buka alamat dalam penyemak imbas: http://localhost:8080, anda boleh melihat carta alir yang dilukis.

Kesimpulan:

Dalam proses menggunakan d3.js, pembangun perlu menguasai siri APInya untuk melukis pelbagai carta visualisasi data yang kompleks. Walau bagaimanapun, dalam aplikasi vue.js, kami boleh memasang dan memperkenalkan perpustakaan d3.js dengan mudah melalui npm, membina carta alir dengan cepat dan mencapai kesan mengemas kini paparan secara dinamik melalui ciri mengikat data vue.js.

Atas ialah kandungan terperinci Cara memasang d3 dalam vue dan mencipta carta alir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!