기존 SVG 요소를 G 태그로 감싸기

이것은 간단한 질문 일 뿐이므로 힘든 시간을 보내고 있습니다. 새 SVG g 태그에 기존 SVG 모양을 "래핑"할 수 있습니까? ie group) d3.js를 사용하면, .wrap()은 jQuery에서 작동합니까? "수동으로"새로운 g 태그를 만들려면 기존 요소를 해당 g로 이동하는 방법은 무엇입니까?기존 SVG 요소를 G 태그로 감싸기

출처

2014-03-28 drewmoore

D3가에 대한 모든 기능을 제공하지 않습니다 나에게 DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent을 준 그래서

d3.selectAll(selectElementsToWrap).each(function() { var el = this; d3.select(el.parentNode) .insert("g") .attr("class", "wrapped") .append(function() { return el; }); });

같은 문제를 해결, 그것은'랩을 사용하는 것이 훨씬 쉽다()'if 그게 당신이 찾고있는 것을 해줍니다. –

@LarsKotthoff 그리고 jQuery는 SVG에서 요소를 줄 바꿈해도 괜찮습니까? – drewmoore

나는 그것을 사용한 적이 한번도 없었지만, 왜 그렇게해서는 안되는지 알지 못한다. 단지 DOM 일 뿐이다. –

append 또는 insert에 기존 DOM 요소를 전달하면 요소 (및 그 하위 요소)가 DOM 계층의 현재 위치에서 방금 삽입 한 위치로 이동됩니다. D3는 항상 삽입하거나 이전에 삽입 할 수있는 요소를 결정하는 기능을 사용할 것으로 예상하고, 우리가 each 문 내에서 모든 일을 할 때 그 필요는 없습니다 때문에

var stuffToBeWrapped = d3.selectAll(".stuff"); 

stuffToBeWrapped.each(function() { 

    d3.select(this.parentNode).insert("g", function(){return this;}) 
       //insert a new <g> element immediately before this element 
    .attr("class", "wrapper") //set anything you want to on the <g> 
    .append(function(){return this;}); 
      //move the content element into the group 

});

이 좀 지저분입니다. 그러나 그것은 일을 끝내야한다!

(이미 페이지에 라이브러리를 가지고했을 경우는, JQuery와 메소드를 사용합니다. JQuery와 보통 가 SVG 요소를 조작 아무런 문제가되지 않습니다, 그것은 단지를 만들 수 없습니다!)

출처

2014-03-28 17:42:42 AmeliaBR

아름다운 대답. 감사. – drewmoore

@AmeliaBR의 대답은 작업 할 수 없습니다, 내가 승인 된 솔루션은

출처

2017-04-15 10:50:21

기존 SVG 요소를 G 태그로 감싸기

답변

관련 문제