如何將svg轉換為d3.js代碼？

Question

我正在使用gephi （一種用於制作圖表的軟件）進行工作，它以平面svg格式導出抓圖。

我需要將圖形放置在具有某些交互行為的網頁中，以突出顯示該選擇，因為它具有1800個節點。

我想知道是否有任何方法可以在D3.js中導入此svg或某種工具來將svg代碼轉換為D3.js代碼

這是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只是一個JavaScript庫，用於基於數據處理DOM元素，而SVG是一組DOM元素。 D3可以創建那些元素，也可以操縱已經存在的元素。 但是，D3的最強大功能是將數據與這些元素相關聯，並且在您的情況下，SVG是使用Gephi創建的，因此您只有元素，而沒有數據...在這種情況下，您可以操作SVG元素僅使用CSS和純凈的原始JavaScript，而不使用D3。

但是，您可以根據需要使用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很大！）：

 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()