d3 Выбор и изменение g элементов в элементах svg

Question

У меня возникли проблемы с выбором и манипулированием (я хочу добавить поведение клика) к пути в встроенном коде svg, который я создал в Inkscape, а затем вставляем в свой html-файл.

<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 ("# ид") .. может кто-нибудь помочь?

Answer 1

Выбор по ID:

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>