如何将 svg 转换为 d3.js 代码？
How can I convert an svg to d3.js code?
我正在使用 gephi，一种制作图表的软件，它以平面 svg 格式导出图表。
我需要将图形放在具有一些交互行为的网页中以突出显示选择，因为它有 1800 个节点。
我想知道是否有任何方法可以将此 svg 导入 D3.js 或一些工具将 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>
你可以试试 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()
没有"converting svg to d3 code"这样的东西。 D3 只是一个 JavaScript 库，用于根据数据操作 DOM 元素，而您的 SVG 是一组 DOM 元素。 D3 可以创建那些元素，也可以操作已经存在的元素。但是，D3 最强大的功能是将数据与这些元素相关联，在您的情况下，SVG 是使用 Gephi 创建的，因此您只有元素，没有数据......在这种情况下，您可以操作您的 SVG仅使用 CSS 和纯香草 JavaScript 的元素，不使用 D3.
但如果需要，您可以使用 D3 来操作它们。您不需要 "convert" 任何东西，只需将您的 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 代码段。单击 "run code snippet"（尝试 "full page"，因为您的 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>
我正在使用 gephi，一种制作图表的软件，它以平面 svg 格式导出图表。
我需要将图形放在具有一些交互行为的网页中以突出显示选择，因为它有 1800 个节点。
我想知道是否有任何方法可以将此 svg 导入 D3.js 或一些工具将 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>
你可以试试 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()
没有"converting svg to d3 code"这样的东西。 D3 只是一个 JavaScript 库，用于根据数据操作 DOM 元素，而您的 SVG 是一组 DOM 元素。 D3 可以创建那些元素，也可以操作已经存在的元素。但是，D3 最强大的功能是将数据与这些元素相关联，在您的情况下，SVG 是使用 Gephi 创建的，因此您只有元素，没有数据......在这种情况下，您可以操作您的 SVG仅使用 CSS 和纯香草 JavaScript 的元素，不使用 D3.
但如果需要，您可以使用 D3 来操作它们。您不需要 "convert" 任何东西，只需将您的 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 代码段。单击 "run code snippet"（尝试 "full page"，因为您的 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>