मैं एसवीजी सामग्री को कैसे हटा या प्रतिस्थापित कर सकता हूं?

200

मेरे पास जावास्क्रिप्ट कोड का एक टुकड़ा है जो एक svgतत्व को बनाता है (डी 3 का उपयोग करके) जिसमें एक चार्ट होता है। मैं AJAX का उपयोग करके वेब सेवा से आने वाले नए डेटा के आधार पर चार्ट को अपडेट करना चाहता हूं, समस्या यह है कि हर बार जब मैं अपडेट बटन पर क्लिक करता हूं svg, तो यह एक नया उत्पन्न करता है , इसलिए मैं पुराने को हटाना चाहता हूं या इसकी सामग्री को अपडेट करना चाहता हूं।

यहां जावास्क्रिप्ट फ़ंक्शन से एक स्निपेट दिया गया है जहां मैं बनाता हूं svg:

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

मैं पुराने svgतत्व को कैसे हटा सकता हूं या कम से कम इसकी सामग्री को बदल सकता हूं ?

— सामी
स्रोत

6

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

— फेलिक्स क्लिंग

1

@ फेलिक्स क्लिंग धन्यवाद :) D3.js से हटाए गए फ़ंक्शन ने इसे var svg1 = d3.select ("svg") .remove () को हल किया;

— सामी

1

आप का उपयोग कर सकते हैंd3.select("svg").empty();

— csandreas1

282

यहाँ समाधान है:

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

यह removeD3.js. द्वारा प्रदान किया गया एक फ़ंक्शन है

— सामी
स्रोत

110

वास्तव में यदि आप svg से तत्वों को निकालना चाहते हैं तो इसका उपयोग करना बेहतर होगा svg.selectAll("*").remove();:। तत्व की यह स्पष्ट सामग्री भले ही svgएक समूह तत्व ( g) को चर सेट करें ।

— नक्स

4

@ आपकी वजह से मैं आज समय पर जा रहा हूं। d3.html ('') सफारी में काम नहीं करता है।

— ग्लिफ़

धन्यवाद, हालांकि अगर मैं एक चार्ट निकालता हूं और फिर तुरंत एक नया चार्ट जोड़ने की कोशिश करता हूं, तो यह जोड़ा नहीं जाता? किसी भी सुझाव, धन्यवाद।

— कोडिंगबक

उपरोक्त कोड पूरे svg तत्व को हटाता है जिसमें चार्ट होता है। मुझे लगता है कि एक नया चार्ट जोड़ने के लिए आपको एक नया svg तत्व बनाने की आवश्यकता होगी।

— सामी

अजीब बात है कि सफारी बग अभी भी मौजूद है। उन्हें पैच करना चाहिए।

— टायुगी

149

यदि आप सभी बच्चों से छुटकारा पाना चाहते हैं,

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

svg से जुड़ी सभी सामग्री को हटा देगा।

नोट : यदि आप चार्ट को अद्यतन करना चाहते हैं तो यह अनुशंसा की जाती है।

— burce
स्रोत

9

यदि आप चार्ट को अपडेट करना चाहते हैं तो मैं इसकी सलाह देता हूं। अपने बच्चों को हटा दें फिर नए लोगों को जोड़ें।

— माथियस आराजू

मैंने अपनी समस्या को हल करने के लिए इस उत्तर का उपयोग किया, इस उत्तर ने svg टैग के अंदर सभी बनाई गई सामग्री को साफ़ कर दिया, और मैं सामग्री को साफ़ करने के बाद अपने चार्ट को अपडेट कर सकता हूं

— Hamed R

क्या यह किसी भी संबंधित घटना श्रोताओं को हटा देगा, जो एसवीजी में बच्चों को सौंपा गया है।

— अनुरुप पेंडेला

58

आईडी विशेषता को सेट करते समय svg तत्व को जोड़ने से d3 का चयन कर सकते हैं ताकि हटा दें () बाद में इस तत्व पर आईडी:

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

...

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

3

यह उत्तर के रूप में चयनित एक से अधिक सुरक्षित / क्लीनर समाधान है। आईडी का उपयोग करके svg का चयन करके, कोई अन्य svg तत्वों को गड़बड़ाने से बच सकता है जो उसी पृष्ठ पर मौजूद हो सकते हैं। कृपया इसे बढ़ाएँ।

— क्वेस्ट मोंगर

मैंने अतीत में इसका इस्तेमाल किया था और यह एक सटीक समाधान है। एक आईडी जोड़ना भी नोड्स का दस्तावेज है।

— क्रिस्टोफ रूसो

31

मेरे पास दो चार्ट थे।

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

इससे सभी चार्ट हट गए।

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

यह मौजूदा बार चार्ट को हटाने के लिए काम करता है, लेकिन फिर मैं बार चार्ट को फिर से नहीं जोड़ सका

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

इसकी कोशिश की। इसने मुझे न केवल मौजूदा बार चार्ट को हटाने दिया, बल्कि मुझे एक नए बार चार्ट को फिर से जोड़ने दिया।

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

सुनिश्चित नहीं है कि यह निकालने का सही तरीका है, और d3 में चार्ट को फिर से जोड़ना है। यह Chrome में काम करता है, लेकिन IE में परीक्षण नहीं किया है।

— स्टर्लिंग
स्रोत

6

मैं D3.js का उपयोग करके एसवीजी का उपयोग कर रहा हूं और मेरे पास एक ही मुद्दा था।

मैंने पिछले svg को हटाने के लिए इस कोड का उपयोग किया था लेकिन SVG के अंदर रैखिक ढाल IE में नहीं आ रहा था

$ ( "# Container_div_id") एचटीएमएल ( "")।

तब मैंने समस्या को हल करने के लिए नीचे कोड लिखा था

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

यहाँ मैं एसवीजी के अंदर पिछले जी और पथ को हटा रहा हूं, नए के साथ बदल रहा हूं।

एसवीजी टैग के अंदर मेरी रैखिक ढाल को स्थिर सामग्री में रखते हुए और फिर मैंने उपरोक्त कोड को कॉल किया, यह IE में काम करता है

— शैलेंद्र सिंह
स्रोत

6

आप अपने svg वाले div की सामग्री को हटाने के लिए सिर्फ jQuery का उपयोग कर सकते हैं।

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

— cjungel
स्रोत

12

जब आप पहले से ही डी 3 में इस काम के लिए एक महान उपकरण का उपयोग कर रहे हैं, तो डोम हेरफेर के लिए jQuery का उपयोग करने के लिए एक महान विचार नहीं है। खासकर यदि आपके पास अन्यथा jQuery का उपयोग नहीं है।

— वॉरेन रीली

4

यदि आप xhtml का उपयोग कर रहे हैं, तो आपको सही 'नेमस्पेस' के साथ तत्व बनाने वाले डी 3 का उपयोग append("svg:svg")नहीं करना चाहिए append("svg")।

— Sprintstar
स्रोत