d3 svg 요소 내의 g 요소 선택 및 수정

Question

Inkscape에서 제작 한 다음 내 html 파일에 붙여 넣은 인라인 svg 코드의 경로를 선택하고 조작하는 데 문제가 있습니다.

<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561" 
xml:space="preserve"> 


<g id="section3"> 
<path id="section" 
    d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643 11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/> 
</g> 

나는 누군가가 도움을 줄 수 방법 ...에서 getElementById, d3.select ("# 아이디") ... 모든 종류의 시도했습니다? ID에 의해

Answer 1

선택 :

d3.select("#section3") 

확인이 데모, 경로 클릭 (당신은 그것을 찾을 수 아래로 스크롤해야합니다) :

d3.select("#section3").on("click", function(){ 
 
    console.log("hello"); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561" 
 
xml:space="preserve"> 
 

 

 
<g id="section3"> 
 
<path id="section" 
 
    d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643 11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/> 
 
</g>