Как преобразовать код svg в d3.js?

Я работаю с 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>

javascript svg d3.js graph gephi
person Fer Mirabelli    schedule 27.08.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Нет такой вещи, как «преобразование кода svg в d3». D3 — это просто библиотека JavaScript для управления элементами DOM на основе данных, а ваш 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. Нажмите «Выполнить фрагмент кода» (попробуйте «Вся страница», потому что ваш 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>

person Gerardo Furtado    schedule 29.08.2016
comment
Спасибо @gerardo-furtado! Это решение, которое мне нужно. Я начинаю кодировать с помощью js и думал, что D3 - это способ сделать это, но, как вы говорите, данных нет, потому что у меня уже есть элементы. - person Fer Mirabelli; 29.08.2016

arrow_upward
1
arrow_downward

Вы можете попробовать что-то вроде 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()
person ego2dot0    schedule 28.08.2016
comment
Спасибо за ваш ответ @ ego2dot0, мне нужны способы, управляемые данными, но я хочу сохранить исходные позиции узлов, сгенерированные в gephi. Я собираюсь проверить этот код. - person Fer Mirabelli; 29.08.2016