SVG içeriğini nasıl kaldırabilir veya değiştirebilirim?

201

(D3.js kullanarak) svgbir grafik içeren bir öğe oluşturur JavaScript kodu bir parça var . Grafiği AJAX kullanarak bir web hizmetinden gelen yeni verilere göre güncellemek istiyorum, sorun güncelleme düğmesine her tıkladığımda yeni bir tane oluşturması svg, bu yüzden eskisini kaldırmak veya içeriğini güncellemek istiyorum.

İşte JavaScript fonksiyonundan bir parçacığı oluşturduğum yer svg:

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

Eski svgöğeyi nasıl kaldırabilir veya en azından içeriğini değiştirebilirim?

— Sami
kaynak

6

github.com/mbostock/d3/wiki/Selections#wiki-remove

— Felix Kling

1

@ Felix Kling Teşekkürler :) D3.js'den kaldırma işlevi var var svg1 = d3.select ("svg") .remove ();

— Sami

1

kullanabilirsinizd3.select("svg").empty();

— csandreas1

283

İşte çözüm:

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

Bu, removeD3.js tarafından sağlanan bir işlevdir.

— Sami
kaynak

110

Eğer öğeleri kaldırmak istiyorsanız aslında dan svg'ait daha iyi kullanımına olacaktır: svg.selectAll("*").remove();. Bu, svgdeğişkenleri bir gruplama öğesine ( g) ayarlasa bile elemanın içeriğini temizler .

— Nux,

4

@Nux senin yüzünden bugün zamanında ayrılıyorum. d3.html ('') Safari'de çalışmıyor.

— glif

Teşekkürler, ancak ben bir grafik kaldırmak ve hemen sonra yeni bir grafik eklemeye çalışırsanız, eklenmez? Herhangi bir öneri, teşekkür ederim.

— codingbbq

Yukarıdaki kod, grafiği içeren tüm svg öğesini kaldırır. sanırım yeni bir grafik eklemek için yeni bir svg öğesi oluşturmanız gerekir.

— Sami

Safari hatasının hala mevcut olması garip. Bunu yamaları gerekir.

— Tyguy7

149

Tüm çocuklardan kurtulmak istiyorsanız,

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

svg ile ilişkili tüm içeriği kaldıracaktır.

Not : Grafiği güncellemek istemeniz durumunda bu önerilir.

— burce
kaynak

9

Bir grafiği güncellemek istiyorsanız bunu öneriyorum. Çocuklarını kaldırın ve yenilerini ekleyin.

— Matheus Araujo

Sorunumu çözmek için bu cevabı kullandım, bu cevap svg etiketi içindeki tüm oluşturulan içeriği temizledi ve içerikleri temizledikten sonra grafiklerimi güncelleyebilirim

— Hamed R

Bu, SVG'deki çocuklara atanan ilişkili olay dinleyicilerini kaldıracak mı?

— Anuroop Pendela

59

Svg öğesini eklerken id niteliğini ayarlamak, d3'ün bu öğede daha sonra id ile remove () öğesini seçmesine de izin verebilir:

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

...

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

3

cevap olarak seçilen çözümden çok daha güvenli / temiz bir çözümdür. id kullanarak svg'yi seçerek, aynı sayfada bulunabilecek diğer svg öğelerini karıştırmaktan kaçınabilirsiniz. lütfen bunu oylayın.

— Görev Monger

Bunu geçmişte kullandım ve bu kesin bir çözüm. Bir kimlik eklemek, düğümleri de belgeler.

— Christophe Roussy

31

İki çizelgem vardı.

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

Bu, tüm grafikleri kaldırdı.

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

Bu, mevcut çubuk grafiğini kaldırmak için çalıştı, ancak daha sonra çubuk grafiği yeniden ekleyemedim

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

Bunu denedim. Sadece mevcut çubuk grafiği kaldırmama izin vermez, aynı zamanda yeni bir çubuk grafik eklememe izin verir.

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 + ')');

Bunun kaldırmanın doğru yolu olup olmadığından emin olun ve d3'te bir grafik ekleyin. Chrome'da çalıştı, ancak IE'de test etmedi.

— Stirling
kaynak

6

D3.js kullanarak SVG kullanıyorum ve aynı sorunu vardı.

Önceki svg kaldırmak için bu kodu kullandım ama SVG içindeki doğrusal degrade IE geliyor değildi

$ ( "# Container_div_id") html ( "");

sonra sorunu çözmek için aşağıdaki kodu yazdım

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

Burada SVG içindeki önceki g ve yolu kaldırıyorum, yenisiyle değiştiriyorum.

Statik içerikte SVG etiketleri içinde doğrusal gradyanı tutmak ve sonra yukarıdaki kodu çağırdım, Bu IE'de çalışıyor

— Shailender Singh
kaynak

6

Ayrıca svg'nizi içeren div içeriğini kaldırmak için jQuery kullanabilirsiniz.

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

— cjungel
kaynak

12

Zaten D3 bu iş için harika bir araç kullanıyorsanız DOM manipülasyon için jQuery kullanmak için iyi bir fikir değil. Özellikle kullanımda jQuery yoksa.

— Warren Reilly

4

Xhtml kullanıyorsanız append("svg:svg"), append("svg")D3 öğesinin doğru 'ad alanına' sahip olması için kullanmamalısınız.

— Sprintstar
kaynak