Question

我正在使用gephi，一个制作图表的软件，并以平面svg格式导出graps。

我需要将图形放在具有一些交互行为的网页中，以突出显示选择，因为它有1800个节点。

我想知道是否有任何方法可以在D3.js或某些工具中导入此svg以将svg代码转换为D3.js代码

以下是带有几个节点和链接的svg格式示例。

bc

Answer 1

没有像“将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>

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

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

2 个答案: