[javascript] मैं एसवीजी सामग्री को कैसे हटा या बदल सकता हूं?



Answers

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

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

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

Question

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

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

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

मैं पुराने svg तत्व को कैसे हटा सकता हूं या कम से कम अपनी सामग्री को प्रतिस्थापित कर सकता हूं?




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

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

सुनिश्चित नहीं है कि यह हटाने का सही तरीका है, और डी 3 में एक चार्ट दोबारा जोड़ना है। यह क्रोम में काम किया, लेकिन आईई में परीक्षण नहीं किया है।




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

मैंने पिछले एसवीजी को हटाने के लिए इस कोड का इस्तेमाल किया लेकिन एसवीजी के अंदर रैखिक ढाल आईई में नहीं आ रहा था

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

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

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

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

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




Related