2014-03-13 2 views
1

이것이 나를 미치게하기 때문에 나를 도울 수 있기를 바랍니다.다시 그리기위한 d3 svg 요소 삭제

그래서 나는 d3을 사용하여 svg를 다시 그리려고했습니다. 내 코드에서 내가 사용하여 SVG를 추가

내 업데이트 기능 내가 다음 요소를 제거하기 위해 진행이라고
d3.xml("Images/vertical_line.svg", "image/svg+xml", function(xml) { 

    var importedNode = document.importNode(xml.documentElement, true); 
    var svg = d3.select('#'+id+'_verticallinecontainer').node().appendChild(importedNode); 

    }); 

:

d3.select("#"+id+'_verticallinecontainer').remove(); 

이 컨테이너와 요소를 제거합니다. 그런 다음 위의 코드를 사용하여 svg를 다시 그려 넣습니다.

내 문제는 그것이 svg를 다시 추가 할 때 두 번이나 그 이유를 이해하지 못한다는 것입니다. d3이 어떻게 든 svg를 캐시하여 다시 추가하는 것 같습니다.

희망 사항을 해결하면 도움이 될만한 도움이 될 것입니다.

+0

당신을 가지고

대신에, 나는이 라인으로 SVG 내부에 생성 된 g 요소를 제거 대신'd3.select (svg) .remove()'를 시도 했습니까? –

+0

svg를 제거하려고하는 요소의 이름으로 지정해야합니까? – Mkni1408

+0

아니요, 변수'svg'입니다. –

답변

4

FIDDLE 예를 들어 SVG와 포함 된 서클을 추가, 제거 및 다시 추가하는 간단한 예가 있습니다. 희망이 도움이됩니다.

function update() { 
    svg.remove(); 
    svg = d3.selectAll("body").append("svg"); 
    svg.append("circle") 
     .attr("cx",40) 
     .attr("cy",40) 
     .attr("r",20) 
     .style("fill","blue"); 
} 
3

나는 이와 비슷한 문제가있었습니다. SVG 요소를 제거해도 필자는 원하는대로 데이터를 완전히 업데이트 할 수 없었습니다.

전체 설명과 상황 여기에 표시된 내 updateGraph에서

d3.selectAll("g > *").remove() 

() 함수 : Repainting/Refreshing Graph in D3