SVG 콘텐츠 삭제 또는 치환 방법

SVG 콘텐츠 삭제 또는 치환 방법

(D3.js를 사용하여) 작성하다JavaScript 코드 조각을 가지고 있습니다.svg차트가 포함된 요소.AJAX를 사용하여 웹 서비스에서 받은 새로운 데이터를 기반으로 차트를 업데이트하고 싶은데 업데이트 버튼을 클릭할 때마다 새로운 데이터가 생성됩니다.svg오래된 것을 삭제하거나 내용을 갱신하고 싶습니다.

여기 JavaScript 함수의 일부분이 있습니다.이 함수는 이 함수는svg:

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

오래된 것을 제거하려면 어떻게 해야 하나요?svg적어도 그 내용을 바꿀 수 있을까요?

해결책은 다음과 같습니다.

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

이거는removeD3.js에 의해 제공되는 기능.

모든 아이들을 없애고 싶다면

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

는 svg와 관련된 모든 콘텐츠를 삭제합니다.

svg 요소를 추가할 때 id 속성을 설정하면 d3이 나중에 id에 의해 이 요소에서 remove()를 선택하도록 할 수도 있습니다.

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에서는 테스트하지 않았습니다.

D3.js를 사용하여 SVG를 사용하고 있는데 같은 문제가 발생하였습니다.

이전 svg를 제거하기 위해 이 코드를 사용했지만 SVG 내부의 선형 그라데이션이 IE에 들어오지 않았습니다.

$("#syslog_div_id").syslog");

그리고 문제를 해결하기 위해 아래 코드를 작성했습니다.

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

여기에서는 SVG 내의 이전 g와 경로를 제거하고 새 경로로 교체합니다.

SVG 태그의 선형 구배를 정적 콘텐츠로 유지한 후 위의 코드를 호출했습니다.IE에서 동작합니다.

jQuery를 사용하여 svg를 포함하는 div의 내용을 삭제할 수도 있습니다.

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

를 사용해 주세요.append("svg:svg"),것은 아니다.append("svg")xhtml을 사용하는 경우 D3에서 올바른 '네임스페이스'로 요소를 만들 수 있습니다.

https://www.d3-graph-gallery.com/graph/line_basic.html의 코드를 따라가면 다음과 같은 코드가 있습니다.

svg.append("path")
  .datum(filteredData)
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(function(k) { return x(k.date) })
    .y(function(k) { return y(k.value) })
   )  

그래서 저는 새로운 라인이 생기기 직전에 이렇게 딱지를 쳤습니다.

d3.selectAll("path").remove()

언급URL : https://stackoverflow.com/questions/10784018/how-can-i-remove-or-replace-svg-content