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

svg차트를 포함 하는 요소를 (D3.js 사용) 생성하는 JavaScript 코드 조각 이 있습니다. 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에서 오지 않았습니다.

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

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

$('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")그래서 D3는 XHTML을 사용하는 경우 올바른 '네임 스페이스'와 요소를 만드는 것이다.