Gunakan d3.js untuk melaksanakan hubungan menu drop-down untuk mengemas kini carta

Dokumen ini bertujuan untuk membimbing pemaju tentang cara menggunakan D3.js dalam kombinasi dengan mod `Join`,` Enter`, `Update`,` Exit` untuk melaksanakan visualisasi interaktif yang memilih data melalui menu drop-down HTML dan carta kemas kini dinamik. Titik utama adalah untuk mendengar peristiwa `perubahan` menu lungsur dan lulus nilai yang dipilih ke fungsi yang mengemas kini carta, dengan itu mencapai refresh dinamik carta.

Langkah pelaksanaan

1. Penyediaan data

Pertama, anda perlu menyediakan data untuk menjana carta. Kod berikut menghasilkan data sumber SRC yang mengandungi tahun, nama, pangkat dan nilai. Data ini akan digunakan untuk carta dan pengemaskinian berikutnya.

 // panjang permutasi yang dikehendaki 
panjang const = 4;

// Membina array dari panjang di atas
const perm = array.from (array (panjang) .keys ()). MAP ((d) => d 1);

// Menjana huruf yang sepadan untuk nama
const name = perm.Map ((x) => String.FromCharCode (x - 1 65));

// fungsi permutasi-https://stackoverflow.com/questions/9960908/permutations-in-javascript/24622772#24622772
fungsi permute (permutasi) {
    var panjang = permutation.length,
        hasil = [permutation.slice ()],
        c = array baru (panjang) .fill (0),
        i = 1,
        k, p;

    sementara (i <panjang jika k="i" c p="permutasi" permutasi i="1;" result.push else hasil pulangan menjana const permut="permute" tahun berdasarkan year="permut.map"> i 2000);

// Menjana pemalar tahunan berdasarkan tahun untuk menjana nilai akhir mengikut pangkat {name tahun}
const constant = year.map (d => math.round (d * math.random ())));

const src =
    tahun.map ((y, i) => {
        kembali name.map ((d, j) => {
            kembali {
                Nama: D,
                Tahun: y,
                Kedudukan: Permut [i] [J],
                Const: tetap [i],
                Nilai: math.round (malar [i] / permut [i] [j])
            };
        });
    }). rata ();</panjang>

2. Buat Menu Drop-Down HTML

Gunakan D3.js untuk membuat menu drop-down HTML dan mengisi pilihan dengan data tahun. Kuncinya adalah untuk menambah pendengar acara perubahan ke menu dropdown untuk mencetuskan kemas kini carta apabila pengguna memilih tahun yang berbeza.

 const pilih = d3.select ('badan')
  .append ('div', 'dropdown')
  .style ('kedudukan', 'mutlak')
  .Style ('atas', '400px')
  .append ('pilih')
  .attr ('nama', 'input')
  .classed ('tahun', benar);

pilih.selectall ('pilihan')
  .data (tahun)
  .Enter ()
  .append ('pilihan')
  .Text ((d) => d)
  .attr ("nilai", (d) => d)

pilih.on ("perubahan", event => {
  const filteryr = event.currentTarget.Value;
  lukis (penapis);
});

NOTIS:

• pilih.on ("perubahan", ...) digunakan untuk mendengar peristiwa perubahan menu lungsur.
• Event.CurrentTarget.Value mendapat nilai tahun yang dipilih sekarang.
• Lukis (penapis) memanggil fungsi lukisan carta, lulus tahun yang dipilih sebagai parameter.

3. Buat kanvas SVG

Buat elemen SVG untuk lukisan carta. Tetapkan harta Viewbox SVG untuk menjadikannya responsif.

 // ruang nama
// Tentukan dimensi
const width = 1536;
const height = 720;
const svgns = "http://www.w3.org/2000/svg";
const svg = d3.select ("svg");

svg.attr ("xmlns", svgns) .attr ("viewBox", `0 0 $ {width} $ {height}`);

SVG
  .append ("rect")
  .attr ("kelas", "vboxRect")
  .attr ("lebar", `$ {width}`)
  .attr ("ketinggian", `$ {ketinggian}`)
  .attr ("strok", "hitam")
  .attr ("mengisi", "putih");

// Buat elemen terikat
const bound = svg
  .append ("g")
  .attr ("kelas", "terikat")
  .Style ("Transform", `Translate ($ {Padding.Left} px, $ {padding.top} px)`);

const g = terikat.append ('g')
  .classed ('TextContainer', benar);

4. Tentukan skala

Tentukan skala dan peta data ke koordinat SVG. Pilih jenis skala yang sesuai (seperti skala linear, skala masa, dan lain -lain) mengikut keperluan sebenar.

 const xaccessor = (d) => d.year;
const yaccessor = (d) => d.value;

const scalex = d3
    .scalelinear ()
    .range ([0, BoundWidth])
    .domain (d3.extent (data, xaccessor));

const scaley = d3
    .scalelinear ()
    .range ([boundheight, 0])
    .domain (d3.extent (data, yaccessor));

5. Lukis carta dan laksanakan kemas kini dinamik

Gunakan mod Join, Enter, Update, dan Exit D3.js untuk menarik carta berdasarkan data tahun yang dipilih. Dalam fungsi Draw (), penapis pertama data dan kemudian mengemas kini elemen carta menggunakan selectAll (). Data (). Sertai () kaedah.

 Fungsi Draw (FilteryR) {

  // Penapis data mengikut dropdown
  const data = src.filter (a => a.year == filteryr);

  const scalex = d3
    .scalelinear ()
    .range ([0, BoundWidth])
    .domain (d3.extent (data, xaccessor));

  const scaley = d3
    .scalelinear ()
    .range ([boundheight, 0])
    .domain (d3.extent (data, yaccessor));

  G.Selectall ('Teks')
    .data (data)
    .join (
      enter => enter.append ('teks')
      .attr ('x', (d, i) => scalex (d.year))
      .attr ('y', (d, i) => i)
      .attr ('dy', (d, i) => i * 30)
      .Text ((d) => d.year '-------' d.value.toloCaleString ())
      .style ("isi", "biru"),
      UPDATE =>
      Kemas kini
      .transition ()
      .duration (500)
      .attr ('x', (d, i) => scalex (d.year))
      .attr ('y', (d, i) => i)
      .attr ('dy', (d, i) => i * 30)
      .Text ((d) => d.year '-------' d.value.toloCaleString ())
      .style ("isi", "merah")
    )
}

lukis (penapis);

Mata Utama:

• Data (data) mengikat data yang ditapis ke elemen teks.
• Sertai (masukkan, kemas kini, keluar) mengendalikan status entri, kemas kini, dan keluar data.
• Masukkan Pilih untuk menambah elemen teks baru.
• Kemas kini Memilih untuk mengemas kini elemen teks yang ada.
• Keluar memilih untuk mengeluarkan elemen teks yang tidak lagi diperlukan.

Contoh kod lengkap

 



  <meta charset="utf-8">
  <meta http-equiv="x-ua-comple content" content="ie = edge">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <tirtment> d3.js dropdown update 
  <script src="https://d3js.org/d3.v7.min.js"> </script>



  <svg width="960" ketinggian="500"> </svg>

  <script>
    ////////////////////////////////////////////////////////////////
    ///////////////////////// 00 BUILD DATA//////// /////////////
    ////////////////////////////////////////////////////////////////

    // panjang permutasi yang dikehendaki 
    panjang const = 4;

    // Membina array dari panjang di atas
    const perm = array.from (array (panjang) .keys ()). MAP ((d) => d 1);

    // Menjana huruf yang sepadan untuk nama
    const name = perm.Map ((x) => String.FromCharCode (x - 1 65));

    // fungsi permutasi-https://stackoverflow.com/questions/9960908/permutations-in-javascript/24622772#24622772
    fungsi permute (permutasi) {
      var panjang = permutation.length,
        hasil = [permutation.slice ()],
        c = array baru (panjang) .fill (0),
        i = 1,
        k, p;

      sementara (i <panjang) {
        jika (c [i] <i) {
          k = i % 2 && c [i];
          p = permutasi [i];
          permutasi [i] = permutasi [k];
          permutasi [k] = p;
            c [i];
          i = 1;
          result.push (permutation.slice ());
        } else {
          c [i] = 0;
            i;
        }
      }
      hasil pulangan;
    };

    // Menjana permutasi
    const permut = permute (perm);

    // menjana tahun berdasarkan permutasi
    const year = permut.map ((x, i) => i 2000);

    // Menjana pemalar tahunan berdasarkan tahun untuk menjana nilai akhir mengikut pangkat {name tahun}
    const constant = year.map (d => math.round (d * math.random ())));

    const src =
      tahun.map ((y, i) => {
        kembali name.map ((d, j) => {
          kembali {
            Nama: D,
            Tahun: y,
            Kedudukan: Permut [i] [J],
            Const: tetap [i],
            Nilai: math.round (malar [i] / permut [i] [j])
          };
        });
      }). rata ();

    ////////////////////////////////////////////////////////////////
    ////////////////////////// 0 BUILD HTML DROPDOWN //////////////
    ////////////////////////////////////////////////////////////////
    const pilih = d3.select (&#39;badan&#39;)
      .append (&#39;div&#39;, &#39;dropdown&#39;)
      .style (&#39;kedudukan&#39;, &#39;mutlak&#39;)
      .Style (&#39;atas&#39;, &#39;400px&#39;)
      .append (&#39;pilih&#39;)
      .attr (&#39;nama&#39;, &#39;input&#39;)
      .classed (&#39;tahun&#39;, benar);

    pilih.selectall (&#39;pilihan&#39;)
      .data (tahun)
      .Enter ()
      .append (&#39;pilihan&#39;)
      .Text ((d) => d)
      .attr ("nilai", (d) => d)

    // Dapatkan nilai dropdown
    const filteryR = parsefloat (d3.select (&#39;. year&#39;). node (). nilai);

    pilih.on ("perubahan", event => {
      const filteryr = event.currentTarget.Value;
      lukis (penapis);
    });


    ////////////////////////////////////////////////////////////////
    ////////////////////////// 1 DATA WRANGLING ///////////////////
    ////////////////////////////////////////////////////////////////

    const xaccessor = (d) => d.year;
    const yaccessor = (d) => d.value;


    ////////////////////////////////////////////////////////////////
    ///////////////////////// 2 CREATE SVG ////////////////////////
    ////////////////////////////////////////////////////////////////
    // ruang nama
    // Tentukan dimensi
    const width = 960;
    const height = 500;
    const svg = d3.select ("svg");

    ////////////////////////////////////////////////////////////////
    ////////////////////////// 3 CREATE BOUND /////////////////////
    ////////////////////////////////////////////////////////////////
    const padding = {
      Atas: 70,
      Bawah: 100,
      Kiri: 120,
      Kanan: 120
    };
    conse multiplierH = 1; // mengawal ketinggian bekas visual
    conse multiplierw = 1; // Mengawal lebar bekas visual

    const boundheight = ketinggian * multiplierH - padding.top - padding.bottom;
    const boundWidth = width * multiplierw - padding.right - padding.left;

    // Buat elemen terikat
    const bound = svg
      .append ("g")
      .attr ("kelas", "terikat")
      .Style ("Transform", `Translate ($ {Padding.Left} px, $ {padding.top} px)`);

    const g = terikat.append (&#39;g&#39;)
      .classed (&#39;TextContainer&#39;, benar);


    Fungsi Draw (FilteryR) {

      // Penapis data mengikut dropdown
      const data = src.filter (a => a.year == filteryr);

      ////////////////////////////////////////////////////////////////
      ////////////////////////// 4 CREATE SCALE /////////////////////
      ////////////////////////////////////////////////////////////////

      const scalex = d3
        .scalelinear ()
        .range ([0, BoundWidth])
        .domain (d3.extent (data, xaccessor));

      const scaley = d3
        .scalelinear ()
        .range ([boundheight, 0])
        .domain (d3.extent (data, yaccessor));

      G.Selectall (&#39;Teks&#39;)
        .data (data)
        .join (
          enter => enter.append (&#39;teks&#39;)
          .attr (&#39;x&#39;, (d, i) => scalex (d.year))
          .attr (&#39;y&#39;, (d, i) => i)
          .attr (&#39;dy&#39;, (d, i) => i * 30)
          .Text ((d) => d.year &#39;-------&#39; d.value.toloCaleString ())
          .style ("isi", "biru"),
          UPDATE =>
          Kemas kini
          .transition ()
          .duration (500)
          .attr (&#39;x&#39;, (d, i) => scalex (d.year))
          .attr (&#39;y&#39;, (d, i) => i)
          .attr (&#39;dy&#39;, (d, i) => i * 30)
          .Text ((d) => d.year &#39;-------&#39; d.value.toloCaleString ())
          .style ("isi", "merah")
        )
    }

    lukis (penapis);
  </script>


</tirtment>

Meringkaskan

Melalui langkah-langkah di atas, anda boleh melaksanakan carta berdasarkan D3.js yang boleh dikemas kini secara dinamik mengikut pemilihan menu lungsur. Inti adalah untuk mendengar peristiwa perubahan menu drop-down dan menggunakan mod Join, Enter, Update, dan Exit untuk mengemas kini elemen carta dengan cekap. Dalam aplikasi praktikal, pelaksanaan pemprosesan data, skala, dan jenis carta boleh diselaraskan mengikut keperluan khusus.

Atas ialah kandungan terperinci Gunakan d3.js untuk melaksanakan hubungan menu drop-down untuk mengemas kini carta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!