Saya telah membuat bagan PCP d3 dan Ini kode saya:

 var m = [60, 10, 10, 60],
      w = 1000 - m[1] - m[3],
      h = 270 - m[0] - m[2];

 var  x=d3.scaleOrdinal()
    .range([0, w]),
      y = {},
      dragging = {};

    var line = d3.line(),
      background,
      foreground;

 var svg = d3.select("#test").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
      .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");   

    //let dimensions
    // Extract the list of dimensions and create a scale for each.
     x.domain(this.dimensions = d3.keys(data[0]).filter(function(d) {
      if (d === "name") return false;
      if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") {
        y[d] = d3.scaleOrdinal()
          .domain(data.map(function(p) {
            return p[d];
          }))
          .range([h, 0]);
      } else {
       y[d] = d3.scaleLinear().domain([0, d3.max(data.map(function(p) { return p[d]; }))]).range([h, 0]);
      }
      return true;
    }));

    //alert(this.dimensions)

    // Add grey background lines for context.  
    background = svg.append("svg:g")
      .attr("class", "background")
      .selectAll("path")
      .data(data)
      .enter().append("svg:path")
       .style('fill', 'none')
       .attr("d", path.bind(this));


    // Add blue foreground lines for focus.
    foreground = svg.append("svg:g")
      .attr("class", "foreground")
      .selectAll("path")
      .data(data)
      .enter().append("svg:path")
       .style('fill', 'none')
       .style('stroke', 'steelblue')
      .attr("d", path.bind(this));

    // Add a group element for each dimension.
    let g = svg.selectAll(".dimension")
      .data(this.dimensions)
   .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) {
        return "translate(" + x(d) + ")";
      })


    // Add an axis and title.
    g.append("svg:g")
      .attr("class", "axis")
      .each(function(d) {
        d3.select(this).call(d3.axisLeft(y[d]));
      })
      .append("svg:text")
      .attr("text-anchor", "middle")
      .attr("y", -50)
      .attr("x",-10)
      .style("fill", "black")
       .text(function(d) {return d });   


    var firstAxis = d3.selectAll('g.dimension g.axis');

    firstAxis
      .append("svg:image")
      .attr('x',-20)
      .attr('y',-60)
      .attr('width', 40)
      .attr('height', 60)
      .attr("xlink:href", function(s) {
        return "images/" + s+'.png';
      });

    function position(d) {
      var v = dragging[d];
      return v == null ? x(d) : v;
    }

    function transition(g) {
      return g.transition().duration(500);
    }

    // Returns the path for a given data point.
    function path(d) {
           return line(this.dimensions.map(function(p) {
          return [position(p), y[p](d[p])];
      }));

    }

Saya memiliki input sederhana dari halaman web saya yang menampilkan beberapa drop-down input dan berdasarkan nilai yang dipilih, kami melewati setiap kali kumpulan data baru kami ke skrip. Setiap kali pengguna mengubah nilai pada formulir, kumpulan data baru dikirim ke skrip saya . Saya berjuang untuk mencari cara memperbarui (menyegarkan) bagan dengan kumpulan data baru. Saya telah mencoba menggunakan fungsi exit dan remove tetapi tidak berhasil.

svg.exit().remove();
0
monu 23 November 2017, 22:11

1 menjawab

Jawaban Terbaik

Metode keluar:

Mengembalikan pilihan keluar: elemen DOM yang ada dalam pemilihan untuk yang tidak menemukan datum baru. (Pilihan keluar kosong untuk pilihan tidak dikembalikan oleh selection.data.) (dokumentasi API).

Meskipun Anda telah menetapkan data untuk pilihan g, foreground, dan background, Anda belum menentukan data apa pun untuk pemilihan svg, sehingga pilihan keluar akan kosong. Akibatnya, .remove() tidak dapat menghapus apa pun.


Untuk menggunakan pilihan keluar, perhatikan bahwa pilihan keluar tidak menghapus elemen dalam pilihan. Ini adalah pilihan dari subset elemen dalam pilihan yang tidak lagi memiliki data terikat yang sesuai.

Jika pilihan menampung 10 elemen DOM, dan larik data pemilihan diatur ke larik dengan 9 elemen, pemilihan keluar akan berisi satu elemen: elemen berlebih.

Kita dapat menghapus subset ini dengan .exit().remove(). Keluarnya adalah elemen mana yang tidak lagi kita butuhkan, dan remove() menghilangkannya. Keluar tidak menghapus elemen karena kita mungkin masih ingin melakukan sesuatu dengannya, seperti mentransisikannya, atau menyembunyikannya, dll.

Seperti disebutkan dalam kutipan di atas, untuk mengisi pilihan keluar Anda harus menggunakan selection.data():

var selection = svg.selectAll("path")
  .data(data);

Sekarang kita dapat mengakses pilihan masuk, pilihan keluar, dan pilihan update.

Kecuali menentukan kunci, hanya satu dari pilihan masuk atau keluar yang dapat berisi elemen: jika kita membutuhkan lebih banyak elemen, kita tidak perlu keluar, jika kita memiliki elemen berlebih, kita tidak memerlukan yang baru.

Untuk menghapus elemen berlebih, sekarang kita dapat menggunakan:

var selection = svg.selectAll("path")
  .data(data);    

selection.exit().remove();

Mengingat Anda menentukan data untuk pilihan lain seperti foreground, background, dan g, ini adalah pilihan yang harus Anda gunakan .exit() pada, sebagai bagian dari enter/ memperbarui/keluar siklus. Perlu diingat, di d3v4 Anda perlu menggabungkan pembaruan dan memasukkan pilihan untuk melakukan operasi pada elemen yang sudah ada dan elemen baru dalam pemilihan.


Namun, jika Anda hanya ingin menyingkirkan svg dan memulai yang baru (seperti yang ingin Anda lakukan - saat Anda mencoba menghapus svg), Anda cukup menghapus svg:

d3.select("#test")
  .select("svg")
  .remove();

Namun, ini tidak akan memungkinkan Anda bertransisi dengan baik di antara grafik atau memanfaatkan siklus masuk/perbarui/keluar.

Mengapa catatan menggunakan svg.remove()? Karena pemilihan svg memegang elemen g:

 var svg = d3.select("#test") // returns a selection with #test
      .append("svg:svg")      // returns a selection with the new svg
      .attr(...)              // returns the selection with the newly created svg again
      .append("svg:g")        // returns a selection with the new g
      .attr(...);             // returns the selection with the newly created g again

svg akibatnya adalah pilihan g, dan menghapusnya tidak akan menghapus elemen svg. Sebenarnya menjalankan blok kode di atas setelah svg.remove() akan menambahkan elemen svg baru ke DOM tanpa menghapus yang lama.

1
Andrew Reid 23 November 2017, 19:52