如何将 svg 转换为 d3.js 代码？答案

【问题标题】：How can I convert an svg to d3.js code?如何将 svg 转换为 d3.js 代码？
【发布时间】：2016-08-27 23:40:43
【问题描述】：

我正在使用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>

【问题讨论】：

标签： javascript d3.js svg graph gephi

【解决方案1】：

没有像“将 svg 转换为 d3 代码”这样的事情。 D3 只是一个用于根据数据操作 DOM 元素的 JavaScript 库，而您的 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 sn-p。点击“run code sn-p”（试试“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>

【讨论】：

谢谢@gerardo-furtado！这就是我需要的解决方案。我开始用 js 编码，我认为 D3 是这样做的方法，但正如你所说，没有数据，因为我已经有了元素。

【解决方案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()

【讨论】：

感谢您的回答@ego2dot0，我想要数据驱动的方式，但我想保留在 gephi 中生成的原始节点位置。我将检查该代码