SVG 컨텐츠를 제거하거나 교체하려면 어떻게해야합니까?


200

svg차트를 포함 하는 요소를 (D3.js 사용) 생성하는 JavaScript 코드 조각 이 있습니다. AJAX를 사용하여 웹 서비스에서 오는 새로운 데이터를 기반으로 차트를 업데이트하고 싶습니다. 문제는 업데이트 버튼을 클릭 할 때마다 새로운 버튼을 생성하므로 이전 버튼 svg을 제거하거나 내용을 업데이트하고 싶습니다.

다음은 JavaScript 함수의 스 니펫입니다 svg.

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

이전 svg요소를 제거 하거나 최소한 내용을 바꾸 려면 어떻게 해야합니까?



1
@ Felix Kling Thanks :) D3.js에서 remove 함수로 해결했습니다. var svg1 = d3.select ( "svg") .remove ();
Sami

1
당신은 사용할 수 있습니다d3.select("svg").empty();
csandreas1

답변:


282

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

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

이것은 removeD3.js에서 제공 하는 기능입니다.


110
실제로 svg 에서 요소를 제거 하려면 다음을 사용하는 것이 좋습니다 svg.selectAll("*").remove();. svg변수를 그룹화 요소 ( g)로 설정하더라도 요소의 내용이 지워집니다 .
Nux

4
@Nux 당신 때문에 오늘 시간에 떠날거야. Safari에서는 d3.html ( '')이 작동하지 않습니다.
글리프

고맙지 만 차트를 제거한 다음 즉시 새 차트를 추가하려고하면 추가되지 않습니다. 어떤 제안이라도 감사합니다.
codingbbq

위의 코드는 차트가 포함 된 전체 svg 요소를 제거합니다. 내가 생각하는 새 차트를 추가하려면 새로운 svg 요소를 만들어야합니다.
Sami

사파리 버그가 여전히 존재합니다. 그들은 그것을 패치해야합니다.
Tyguy7

149

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

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

svg와 관련된 모든 내용을 제거합니다.

참고 : 차트를 업데이트하려는 경우 권장됩니다.


9
차트를 업데이트하려면이 방법을 권장합니다. 자녀를 제거한 다음 새 자녀를 추가하십시오.
Matheus Araujo 2016 년

이 답변을 사용하여 내 문제를 해결했습니다.이 답변은 svg 태그 안에 작성된 모든 내용을 지우고 내용을 지운 후 차트를 업데이트 할 수 있습니다.
Hamed R

SVG에서 자식에게 할당 된 관련 이벤트 리스너가 제거됩니까?
Anuroop Pendela

58

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();

3
이것은 답변으로 선택된 솔루션보다 훨씬 안전하고 깨끗한 솔루션입니다. id를 사용하여 svg를 선택하면 동일한 페이지에 존재할 수있는 다른 svg 요소가 엉망이되는 것을 피할 수 있습니다. 이것을 찬성하십시오.
Quest Monger

나는 이것을 과거에 사용했으며 이것이 정확한 해결책입니다. ID를 추가하면 노드도 문서화됩니다.
Christophe Roussy

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를 제거하기 위해이 코드를 사용했지만 SVG 내부의 선형 그라디언트는 IE에서 오지 않았습니다.

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

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

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

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

정적 콘텐츠의 SVG 태그 내에 선형 그라디언트를 유지하고 위 코드를 호출했습니다. 이는 IE에서 작동합니다.


6

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

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

12
이미 D3에서이 작업에 유용한 도구를 사용하고있는 경우 DOM 조작에 jQuery를 사용하는 것은 좋지 않습니다. 특히 jQuery를 사용하지 않는 경우.
워렌 라일리

4

당신은 사용해야 append("svg:svg")하지, append("svg")그래서 D3는 XHTML을 사용하는 경우 올바른 '네임 스페이스'와 요소를 만드는 것이다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.