svgをd3.jsコードに変換するにはどうすればよいですか？

Question

私はgephiというグラフを作成するソフトウェアを開発しており、フラットSVG形式でグラフをエクスポートしています。

1800ノードの選択肢を強調表示するために、グラフをWebページに配置して対話的な動作をする必要があります。

私はD3.jsで、このSVGをインポートする方法があるかどうかを知りたいかD3.jsコード

にSVGコードを変換するためのいくつかのツールは、ここでは、いくつかのとSVG形式のサンプルですノードとリンク。

<svg contentScriptType="text/ecmascript" width="2998.8262" 
    xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" 
    contentStyleType="text/css" 
    viewBox="-1491.000000 -1489.000000 2998.826172 2983.000000" height="2983.0" 
    preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" 
    version="1.1"> 
    <g id="edges"> 
     <path fill="none" stroke-width="1.0" 
       d="M -741.524292,330.655731 C -696.531250,212.884094 -452.384125,103.716217 -334.612488,148.709290" 
       class="vansdlp kshhbak" stroke-opacity="0.6" 
       stroke="#73c000"/> 
     <path fill="none" stroke-width="1.0" 
       d="M -334.612488,148.709290 C -379.605560,266.480927 -623.752686,375.648804 -741.524292,330.655731" 
       class="kshhbak vansdlp" stroke-opacity="0.6" 
       stroke="#73c000"/> 
     <path fill="none" stroke-width="23.0" 
       d="M -334.612488,148.709290 C -334.612488,148.709290 -174.612488,148.709290 -334.612488,148.709290" 
       class="kshhbak" stroke-opacity="0.6" stroke="#73c000"/> 
     <path fill="none" stroke-width="1.0" 
       d="M -1003.035095,296.450439 C -943.891846,250.989349 -786.985413,271.512512 -741.524292,330.655731" 
       class="linaroblujh vansdlp" stroke-opacity="0.6" 
       stroke="#73c000"/> 
    </g> 
    <g id="nodes"> 
     <circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-741.5243" 
       class="vansdlp" cy="330.65573" stroke="#000000" 
       stroke-opacity="1.0" stroke-width="1.0"/> 
     <circle fill-opacity="1.0" fill="#73c000" r="40.0" cx="-334.6125" 
       class="kshhbak" cy="148.70929" stroke="#000000" 
       stroke-opacity="1.0" stroke-width="1.0"/> 
     <circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-1003.0351" 
       class="linaroblujh" cy="296.45044" stroke="#000000" 
       stroke-opacity="1.0" stroke-width="1.0"/> 
    </g> 
    <g id="node-labels-outline"> 
     <text stroke-linecap="round" font-size="24" x="-741.5243" y="336.144" 
       fill="#000000" stroke-linejoin="round" 
       style="text-anchor: middle; dominant-baseline: central;" 
       font-family="Arial" class="vansdlp" stroke="#ffffff" 
       stroke-opacity="0.6" stroke-width="3.75px"> 
      vansdlp 
     </text> 
     <text stroke-linecap="round" font-size="96" x="-334.6125" y="166.17023" 
       fill="#000000" stroke-linejoin="round" 
       style="text-anchor: middle; dominant-baseline: central;" 
       font-family="Arial" class="kshhbak" stroke="#ffffff" 
       stroke-opacity="0.6" stroke-width="15.0px"> 
      kshhbak 
     </text> 
    </g> 
</svg> 

Answer 1

「svgをd3コードに変換する」のようなものはありません。 D3は、データに基づいてDOM要素を操作するための単なるJavaScriptライブラリであり、SVGはDOM要素のセットです。 D3はこれらの要素を作成し、既存の要素を操作することもできます。しかし、D3の最も強力な機能は、これらの要素にデータを関連付けることです。あなたの場合、SVGはGephiで作成されているため、要素とデータはありません。その場合、SVGを操作できますD3を使用せずにCSSと純粋なバニラJavaScriptを使用する要素

ただし、必要に応じてD3を使用して操作できます。 「コンバート」する必要はありません.SVGをHTMLに追加し、D3を使用してSVGを操作します。

は、インタラクティブな行動のこの非常に基本的な例では、あなたがそれらを置くと、円はこの単純なコードで、真っ赤になっています。ここ

d3.selectAll("circle").on("mouseover", function(d){ 
    d3.select(this).attr("fill", "red"); 
}).on("mouseout", function(d){ 
    d3.select(this).attr("fill", "#73c000") 
}); 

は一例ですが、私はちょうどあなたのSVGをコピーして、小さなD3を追加しましたスニペット。クリックして「実行コードスニペット」（あなたのSVGが巨大であるため、「フル・ページ」を試してみてください！）：あなたの答えを@にego2dot0ため

d3.selectAll("circle").on("mouseover", function(d){ 
 
d3.select(this).attr("fill", "red"); 
 
}).on("mouseout", function(d){ 
 
d3.select(this).attr("fill", "#73c000") 
 
});

text { 
 
    pointer-events: none; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg contentScriptType="text/ecmascript" width="2998.8262" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" 
 
    contentStyleType="text/css" 
 
    viewBox="-1491.000000 -1489.000000 2998.826172 2983.000000" height="2983.0" 
 
    preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" 
 
    version="1.1"> 
 
    <g id="edges"> 
 
     <path fill="none" stroke-width="1.0" 
 
       d="M -741.524292,330.655731 C -696.531250,212.884094 -452.384125,103.716217 -334.612488,148.709290" 
 
       class="vansdlp kshhbak" stroke-opacity="0.6" 
 
       stroke="#73c000"/> 
 
     <path fill="none" stroke-width="1.0" 
 
       d="M -334.612488,148.709290 C -379.605560,266.480927 -623.752686,375.648804 -741.524292,330.655731" 
 
       class="kshhbak vansdlp" stroke-opacity="0.6" 
 
       stroke="#73c000"/> 
 
     <path fill="none" stroke-width="23.0" 
 
       d="M -334.612488,148.709290 C -334.612488,148.709290 -174.612488,148.709290 -334.612488,148.709290" 
 
       class="kshhbak" stroke-opacity="0.6" stroke="#73c000"/> 
 
     <path fill="none" stroke-width="1.0" 
 
       d="M -1003.035095,296.450439 C -943.891846,250.989349 -786.985413,271.512512 -741.524292,330.655731" 
 
       class="linaroblujh vansdlp" stroke-opacity="0.6" 
 
       stroke="#73c000"/> 
 
    </g> 
 
    <g id="nodes"> 
 
     <circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-741.5243" 
 
       class="vansdlp" cy="330.65573" stroke="#000000" 
 
       stroke-opacity="1.0" stroke-width="1.0"/> 
 
     <circle fill-opacity="1.0" fill="#73c000" r="40.0" cx="-334.6125" 
 
       class="kshhbak" cy="148.70929" stroke="#000000" 
 
       stroke-opacity="1.0" stroke-width="1.0"/> 
 
     <circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-1003.0351" 
 
       class="linaroblujh" cy="296.45044" stroke="#000000" 
 
       stroke-opacity="1.0" stroke-width="1.0"/> 
 
    </g> 
 
    <g id="node-labels-outline"> 
 
     <text stroke-linecap="round" font-size="24" x="-741.5243" y="336.144" 
 
       fill="#000000" stroke-linejoin="round" 
 
       style="text-anchor: middle; dominant-baseline: central;" 
 
       font-family="Arial" class="vansdlp" stroke="#ffffff" 
 
       stroke-opacity="0.6" stroke-width="3.75px"> 
 
      vansdlp 
 
     </text> 
 
     <text stroke-linecap="round" font-size="96" x="-334.6125" y="166.17023" 
 
       fill="#000000" stroke-linejoin="round" 
 
       style="text-anchor: middle; dominant-baseline: central;" 
 
       font-family="Arial" class="kshhbak" stroke="#ffffff" 
 
       stroke-opacity="0.6" stroke-width="15.0px"> 
 
      kshhbak 
 
     </text> 
 
    </g> 
 
</svg>

Answer 2

あなたはhttps://github.com/jColeChanged/svg2d3js ような何かを試みることができる。しかしd3.jsは、データ駆動型の方法でグラフを生成します。変更してアニメートする場合は、このようなsvg2d3jsのアプローチに満足することはできません。

d3.jsは、このようなものを使用します。

aparent.selectAll('a selector') 
    .data(somedata) 
    .enter() 
    .append('g'); 

aparent.selectAll('a selector') 
    .do_somethin()