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要素の上にカーソルを置くが、私は自分のコードを実行したとき、私はnullを取得するときに、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/とそれをきれいにし、それぞれが1行にあることを確認しました。

私はこの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ファイルに出力を貼り付けて、それをロード。その後、私は単純にd.name

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

を得るために、私D3スクリプトを調整するので、これを行うための最善の方法は、イラストレーターからエクスポートしたSVGファイルを使用しないようにしかし、JSONに変換し、それを使用していました。

Answer 2

innerSVGはSVG全体です。それは "額"という名前のIDを持っていません。あなたのコードでは、thisはSVG要素を指します。

だけ1つのポリゴンを使用している場合は、代わりにこれを使用する：

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