svg에 의해로드 된 svg를 svg에 추가하는 방법

Question

동적으로 생성 된 svg에 외부 svg를로드하려고 시도하지만로드 된 svg의 속성에 계속 액세스하려고합니다. 그래서 d3.xml을 사용하지만 d3으로 만든 동적 SVG에이를 통합하는 방법을 찾지 못했습니다.

코드와 JS 콘솔 here 이 코드는 내가 내가 코드를 시도이

<svg id = "svgObj"> 
    <g class = "grp"><svg id=minus>...</svg></g> 
    <g class = "grp"><svg id=minus>...</svg></g> 
</svg> 

처럼 보이는 각각의 요소 내 circle.svg로드하기 위해 노력하고있어

<svg id = "svgObj"> 
    <g class = "grp"></g> 
    <g class = "grp"></g> 
</svg> 

이 SVG를 생산 아래에 있지만 appendChild 메소드가 없다는 콘솔 오류가 있습니다.

var grps = d3.selectAll("g"); 
img = grps.appendChild(svgNode.cloneNode(true)); 

감사의 말을 전방에

Answer 1

@helderdarocha가 설명했듯이, d3 메서드를 일반 Javascript 메서드와 혼합합니다. 그 대답은 일반적인 Javascript 메서드를 사용하여이를 수행하는 방법을 설명 했으므로 d3 메서드를 사용하여이를 수행하는 방법을 설명함으로써 균형을 유지할 것입니다.

d3 선택의 각 요소 내에 새 요소를 추가하려면 메서드 이름은 이 아니라 간단히 append입니다. 추가 할 매개 변수는 태그 이름 (d3은 선택 항목의 각 요소에 대해 해당 유형의 새 요소를 만듭니다) 또는 실제 DOM 요소를 반환하는 함수입니다 (함수는 선택 영역의 각 요소에 대해 호출됩니다. 데이터 값 및 인덱스를 매개 변수로 사용). 기존 노드를 복제하고 있기 때문에, 그건 당신이 사용하고자하는 버전입니다 :

var grps = d3.selectAll("g"); 
img = grps.append(function(){return svgNode.cloneNode(true);}); 

Answer 2

나는 전에 D3을 사용하지 않았지만 이해하기 쉽게 보입니다. 오류 메시지는 배열에 appendChild() 메서드가 없음을 나타냅니다. 설명서를 읽고 선택한 내용이 이중 노드 (Operating on selections 참조)로 반환되므로 appendChild()을 사용하려면 [0][0] (첫 번째 노드를 선택 함)을 추가해야합니다.

이 일반 DOM을 이용하여 제 노드를 선택하고, (출력에 일부 형상 및 무)에는 오류가 발생하지 : 각 노드에 코드를 삽입 할 필요가 있기 때문에

var grps = d3.selectAll("g")[0][0]; 

하면 each()를 사용할 수있다 (참조 : 이 같은 Control는) :

d3.selectAll("g").each(function() { 
    img = this.appendChild(svgNode.cloneNode(true)); 
}); 

난 당신의 코드를 테스트하고 그 중간에 흰색 대시 검은 원을 생산하고 있습니다. 그게 네가 예상했던거야?