Làm cách nào để xóa hoặc thay thế nội dung SVG?

Tôi có một đoạn mã JavaScript tạo (sử dụng D3.js) một svgphần tử có chứa biểu đồ. Tôi muốn cập nhật biểu đồ dựa trên dữ liệu mới đến từ dịch vụ web bằng AJAX, vấn đề là mỗi lần tôi nhấp vào nút cập nhật, nó sẽ tạo một cái mới svg, vì vậy tôi muốn xóa cái cũ hoặc cập nhật nội dung của nó.

Đây là đoạn trích từ hàm JavaScript nơi tôi tạo svg:

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

Làm cách nào tôi có thể xóa svgphần tử cũ hoặc ít nhất thay thế nội dung của nó?

Đây là giải pháp:

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

Đây là một removechức năng được cung cấp bởi D3.js.

Nếu bạn muốn thoát khỏi tất cả trẻ em,

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

sẽ loại bỏ tất cả nội dung liên quan đến các Svg.

Lưu ý : Điều này được khuyến nghị trong trường hợp bạn muốn cập nhật biểu đồ.

Đặt thuộc tính id khi nối thêm phần tử svg cũng có thể cho phép d3 chọn để loại bỏ () sau phần tử này theo id:

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

...

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

Tôi đã có hai biểu đồ.

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

Điều này loại bỏ tất cả các biểu đồ.

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

Điều này hoạt động để xóa biểu đồ thanh hiện có, nhưng sau đó tôi không thể thêm lại biểu đồ thanh sau

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

Đã thử điều này. Nó không chỉ cho phép tôi loại bỏ biểu đồ thanh hiện có mà còn cho phép tôi thêm lại biểu đồ thanh mới.

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

Không chắc chắn nếu đây là cách chính xác để loại bỏ và thêm lại biểu đồ trong d3. Nó hoạt động trong Chrome, nhưng chưa được thử nghiệm trên IE.

Tôi đang sử dụng SVG bằng D3.js và tôi gặp vấn đề tương tự.

Tôi đã sử dụng mã này để loại bỏ các Svg trước đó nhưng gradient tuyến tính bên trong SVG không xuất hiện trong IE

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

sau đó tôi đã viết đoạn mã dưới đây để giải quyết vấn đề

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

Ở đây tôi đang loại bỏ g và đường dẫn trước đó bên trong SVG, thay thế bằng cái mới.

Giữ độ dốc tuyến tính của tôi bên trong các thẻ SVG trong nội dung tĩnh và sau đó tôi đã gọi mã ở trên, Điều này hoạt động trong IE

Bạn cũng có thể chỉ cần sử dụng jQuery để xóa nội dung của div có chứa svg của bạn.

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

Bạn nên sử dụng append("svg:svg"), không append("svg")để D3 tạo thành phần có 'không gian tên' chính xác nếu bạn đang sử dụng xhtml.