ฉันจะลบหรือแทนที่เนื้อหา SVG ได้อย่างไร

ฉันมีรหัส JavaScript ซึ่งสร้าง (โดยใช้ D3.js) svgองค์ประกอบที่มีแผนภูมิ ฉันต้องการอัปเดตแผนภูมิตามข้อมูลใหม่ที่มาจากบริการบนเว็บโดยใช้ AJAX ปัญหาคือทุกครั้งที่ฉันคลิกที่ปุ่มอัปเดตจะสร้างใหม่svgดังนั้นฉันจึงต้องการลบเก่าหรืออัปเดตเนื้อหา

นี่คือตัวอย่างจากฟังก์ชั่น JavaScript ที่ฉันสร้างsvg:

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

ฉันจะลบsvgองค์ประกอบเก่าหรืออย่างน้อยแทนที่เนื้อหาได้อย่างไร

นี่คือทางออก:

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

นี่คือremoveฟังก์ชั่นที่จัดทำโดย D3.js

หากคุณต้องการกำจัดเด็กทุกคน

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

จะลบเนื้อหาทั้งหมดที่เกี่ยวข้องกับ svg

หมายเหตุ : แนะนำให้ใช้ในกรณีที่คุณต้องการอัพเดทแผนภูมิ

การตั้งค่าแอตทริบิวต์ id เมื่อผนวกองค์ประกอบ svg ยังสามารถให้ d3 เลือกเพื่อลบ () ในภายหลังในองค์ประกอบนี้โดย id:

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

...

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

ฉันมีสองแผนภูมิ

<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

ฉันใช้ SVG โดยใช้ D3.js และฉันมีปัญหาเดียวกัน

ฉันใช้รหัสนี้เพื่อลบ svg ก่อนหน้า แต่การไล่ระดับสีเชิงเส้นภายใน SVG ไม่ได้มาใน IE

$ ( "# container_div_id") HTML ( "");

จากนั้นฉันก็เขียนโค้ดด้านล่างเพื่อแก้ไขปัญหา

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

ที่นี่ฉันกำลังลบ g และเส้นทางก่อนหน้าภายใน SVG แทนที่ด้วยอันใหม่

การเก็บการไล่ระดับสีเชิงเส้นของฉันภายในแท็ก SVG ในเนื้อหาแบบคงที่และจากนั้นฉันเรียกรหัสข้างต้นนี้ใช้งานได้ใน IE

คุณสามารถใช้ jQuery เพื่อลบเนื้อหาของ div ที่มี svg ของคุณ

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

คุณควรใช้append("svg:svg")ไม่ใช่append("svg")เพื่อให้ D3 สร้างองค์ประกอบด้วย 'เนมสเปซ' ที่ถูกต้องหากคุณใช้ xhtml