How can I convert an svg to d3.js code?

Question

I'm working with gephi, a software to make graphs, and it exports the graps in a flat svg format.

I need to put the graph in a web page with some interactive behaviour to highlight the selection beacause it has 1800 nodes.

I would like to know if there is any way to import this svg in D3.js or some tool to transform the svg code into D3.js code

Here is a sample of the svg format with a few nodes and links.

<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

You could try something like https://github.com/jColeChanged/svg2d3js But d3.js generates the graphs in a data driven way. You will not get happy with such a svg2d3js approach, if you want to change and animate.

d3.js uses something like that.

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

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

Answer 2

There is no such a thing like "converting svg to d3 code". D3 is just a JavaScript library for manipulating DOM elements based on data, and your SVG is a set of DOM elements. D3 can create those elements, and can also manipulate already existing elements. However, the most powerful feature of D3 is associating data to those elements, and in your case the SVG has been created with Gephi, so you only have the elements, and no data... that being the case, you can manipulate your SVG elements using just CSS and pure, vanilla JavaScript, without using D3.

But you can manipulate them using D3, if you want. You don't need to "convert" anything, just add your SVG to the HTML and use D3 to manipulate the SVG.

In this very basic example of an interactive behaviour the circles are turned red when you hover them, with this simple code:

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

Here is the example, I just copied your SVG and added the small D3 snippet. Click "run code snippet" (try "full page", because your SVG is huge!):

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>