我正在使用 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>
最佳答案
没有“将 svg 转换为 d3 代码”之类的东西。 D3 只是一个用于根据数据操作 DOM 元素的 JavaScript 库，而你的 SVG 是一组 DOM 元素。 D3 可以创建那些元素，也可以操作已经存在的元素。但是，D3 最强大的功能是将数据与这些元素相关联，在您的情况下，SVG 是使用 Gephi 创建的，因此您只有元素，没有数据......在这种情况下，您可以操作您的 SVG仅使用 CSS 和纯 vanilla 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>关于javascript - 如何将 svg 转换为 d3.js 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39186760/