SVG 파일에서 폴리곤의 id를 어떻게 얻을 수 있습니까?

Question

나는 SVG 파일 (데이터/humanTest.svg) 생성 :

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> 

<polygon fill="yellow" id="forehead" stroke="blue" stroke-width="2" points="318.1,24.6 308.7,40.3 308.7,79.6 360.6,82 378.6,46.6 370,8.9 346.4,17.5 "/> 
</svg> 

을 그리고 난 내가 SVG 요소 위에 마우스를 올려하지만 난 내 코드를 실행하면 내가 널 도착하면 ID가 "이마"를 기록하고 싶다. 누군가가 나를 도와주세요 수 있다면

var main_chart_svg = d3.select("#diagram") 
    .append("svg") 
    .attr({ 
     "width": 800, 
     "height": 800 
    }).append('g'); 

d3.xml("data/humanTest.svg").mimeType("image/svg+xml").get(function (error, xml) { 
     if (error) throw error; 

     var svgNode = xml 
       .getElementsByTagName("svg")[0]; 
     main_chart_svg.node().appendChild(svgNode); 

     var innerSVG = main_chart_svg.select("svg"); 

     innerSVG.append("text") 
      .attr("dy", "1em") 
      .attr("dx", "1em") 
      .text("Test text"); 

     innerSVG.on("mousemove", function (d) { 

      //console.log(innerSVG.id); 
      //d3.select("#diagram svg").selectAll("g") 

      console.log(d3.select(this).attr('id')); //doesnt work, 
      //gives me the svg id (Layer_1) not the id of the polygons within the svg tag 

     }) 
    }); 

매우 감사 할 것인가 :

여기 내 D3 코드입니다.

Answer 1

내가 그것을 해결! 내가 한 일은 SVG를 https://jakearchibald.github.io/svgomg/에로드하고이를 정리하고 각각이 한 줄로되어 있는지 확인하는 것입니다.

그런 다음이 svg 파일을 열고 모든 줄을 JSON으로 다시 포맷하는 스크립트를 작성했습니다.

코드 :

OpenFileDialog dlg = new OpenFileDialog(); 
     dlg.DefaultExt = "*.csv"; 
     dlg.Filter = "SVG Files (*.svg)|*.svg|All Files (*.*)|*.*"; 
     DialogResult res = dlg.ShowDialog(); 
     if (res == DialogResult.OK) 
     { 
      txtSource.Text = dlg.FileName; //Textbox to show filepath 
     } 

using (StreamReader sr = new StreamReader(txtSource.Text.Trim(), Encoding.UTF8)) 
     { 
      string line; 
      int ids = 1; 
      StringBuilder json = new StringBuilder(); 
      json.Append("{\"Polygons\": ["); 

      while ((line = sr.ReadLine()) != null) 
      { 
       string[] s = { }; 
       string[] t = { }; 
       string[] v = { }; 
       StringBuilder test = new StringBuilder(); 

       try 
       { 
        if (line.Trim().StartsWith("<poly")) 
        { 
         s = line.Split(new[] { "points=" }, StringSplitOptions.None); 
         t = s[1].Split('/'); 
         string points = t[0].Replace("\"", "").Trim(); 

         v = points.Split(' '); 
         foreach (string xy in v) 
         { 
          string[] z = { }; 
          z = xy.Split(','); 
          test.Append("{\"x\":" + z[0].ToString() + ", \"y\":" + z[1].ToString() + "},"); 
         } 

         //Found the polygon line 
         json.Append("{\"name\": \"polyId_" + ids + "\","); 
         json.Append("\"points\":["); 
         json.Append(test.ToString().TrimEnd(',')); 
         json.Append("]},"); 
         ids++; 
        } 
       } 
       catch { json.Append(line + " ERROR <br/>"); } 
      } 
     } 

그런 다음 나는 .json 파일로 출력을 붙여 그것을로드. 그런 다음 나는 단순히이 JSON으로 변환하고를 사용하는 것이 아니라 일러스트 레이터에서 내 보낸 SVG 파일을 사용하지 않도록하는 것이 었습니다 할 d.name

svg.selectAll("polygon").on("mousemove", function (d) { 
       Ctooltip.attr("style", "left:420px;top:0px").html(d.name); 
       //console.log(d.name); 
      }) 

그래서 최선의 방법을 얻을 내 D3 스크립트를 조정.

Answer 2

innerSVG은 전체 SVG입니다. "이마"라는 ID가 없습니다. 코드에서 this은 SVG 요소를 나타냅니다. 당신은 하나의 다각형이있는 경우

, 대신를 사용

console.log(d3.select("polygon").attr('id'));