Bagaimana saya bisa menghapus atau mengganti konten SVG?

200

Saya memiliki sepotong kode JavaScript yang membuat (menggunakan D3.js) svgelemen yang berisi bagan. Saya ingin memperbarui bagan berdasarkan data baru yang berasal dari layanan web menggunakan AJAX, masalahnya adalah setiap kali saya mengklik tombol pembaruan, itu menghasilkan yang baru svg, jadi saya ingin menghapus yang lama atau memperbarui kontennya.

Berikut ini cuplikan dari fungsi JavaScript tempat saya membuat svg:

var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

Bagaimana saya bisa menghapus svgelemen lama atau setidaknya mengganti kontennya?

javascript ajax svg d3.js Sami
sumber
6
github.com/mbostock/d3/wiki/Selections#wiki-remove
Felix Kling
1
@ Felix Kling Terima kasih :) fungsi hapus dari D3.js menyelesaikannya var svg1 = d3.select ("svg") .remove ();
Sami
1
Anda dapat menggunakand3.select("svg").empty();
csandreas1

Jawaban:

282

Ini solusinya:

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

Ini adalah removefungsi yang disediakan oleh D3.js.

Sami
sumber
110
sebenarnya jika Anda ingin menghapus elemen dari svg akan lebih baik untuk digunakan: svg.selectAll("*").remove();. Ini menghapus konten elemen meskipun diatursvg variabel ke elemen pengelompokan ( g).
Nux
4
@Nux karena kamu, aku pergi tepat waktu hari ini. d3.html ('') tidak berfungsi di Safari.
mesin terbang
Terima kasih, namun jika saya menghapus bagan dan segera mencoba menambahkan bagan baru, itu tidak ditambahkan? Ada saran, terima kasih.
codingbbq
Kode di atas menghapus seluruh elemen svg yang berisi bagan. Anda perlu membuat elemen svg baru untuk menambahkan grafik baru, saya kira.
Sami
Aneh bahwa bug Safari masih ada. Mereka harus menambal itu.
Tyguy7
149

Jika Anda ingin menyingkirkan semua anak,

svg.selectAll("*").remove();

akan menghapus semua konten yang terkait dengan svg.

Catatan : Ini disarankan jika Anda ingin memperbarui grafik.

burce
sumber
9
Saya merekomendasikan ini jika Anda ingin memperbarui grafik. Keluarkan anak-anak mereka lalu tambahkan yang baru.
Matheus Araujo
Saya menggunakan jawaban ini untuk menyelesaikan masalah saya, jawaban ini menghapus semua konten yang dibuat di dalam svg tag, dan saya dapat memperbarui grafik saya setelah membersihkan konten
Hamed R
Apakah ini akan menghapus pendengar acara terkait, yang ditugaskan untuk anak-anak di SVG?
Anuroop Pendela
58

Mengatur atribut id ketika menambahkan elemen svg juga dapat membiarkan d3 pilih jadi hapus () nanti pada elemen ini dengan id:

var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...

...

d3.select("#the_SVG_ID").remove();

sumber
3
ini adalah solusi yang jauh lebih aman / bersih daripada yang dipilih sebagai jawaban. dengan memilih svg menggunakan id, seseorang dapat menghindari mengacaukan elemen svg lain yang mungkin ada di halaman yang sama. tolong pilih ini.
Quest Monger
Saya menggunakan ini di masa lalu dan ini adalah solusi yang tepat. Menambahkan id juga mendokumentasikan node.
Christophe Roussy
31

Saya punya dua grafik.

<div id="barChart"></div>
<div id="bubbleChart"></div>

Ini menghapus semua bagan. 

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

Ini berfungsi untuk menghapus bagan batang yang ada, tetapi kemudian saya tidak dapat menambahkan kembali bagan batang setelah

d3.select("#barChart").remove();

Sudah mencoba ini. Itu tidak hanya membiarkan saya menghapus bagan batang yang ada, tetapi juga membiarkan saya menambahkan kembali bagan batang baru.

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

var svg = d3.select('#barChart')
       .append('svg')
       .attr('width', width + margins.left + margins.right)
       .attr('height', height + margins.top + margins.bottom)
       .append('g')
       .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

Tidak yakin apakah ini cara yang benar untuk dihapus, dan tambahkan kembali bagan di d3. Ini bekerja di Chrome, tetapi belum diuji di IE.

Stirling
sumber
6

Saya menggunakan SVG menggunakan D3.js dan saya memiliki masalah yang sama.

Saya menggunakan kode ini untuk menghapus svg sebelumnya tetapi gradien linier di dalam SVG tidak datang di IE

$ ("# container_div_id"). html ("");

kemudian saya menulis kode di bawah ini untuk menyelesaikan masalah

$('container_div_id g').remove();
$('#container_div_id path').remove();

di sini saya menghapus g dan path sebelumnya di dalam SVG, menggantikan yang baru.

Menjaga gradien linier saya di dalam tag SVG di konten statis dan kemudian saya memanggil kode di atas, Ini berfungsi di IE

Shailender Singh
sumber
6

Anda juga bisa menggunakan jQuery untuk menghapus konten div yang berisi svg Anda.

$("#container_div_id").html("");
cjungel
sumber
12
Bukan ide bagus untuk menggunakan jQuery untuk manipulasi DOM ketika Anda sudah menggunakan alat yang hebat untuk pekerjaan ini di D3. Terutama jika Anda tidak memiliki jQuery yang digunakan.
Warren Reilly
4

Anda harus menggunakan append("svg:svg"), bukan append("svg")agar D3 membuat elemen dengan 'namespace' yang benar jika Anda menggunakan xhtml.

Sprintstar
sumber