Создавайте собственные элементы SVG ‹circle› из Illustrator/Gephi

Я пытаюсь добавить интерактивности в сетевой граф, который я сделал в Gephi, который выводит SVG. Я использую шаблон Raphael, которому нравится, когда мои узлы вводятся в виде кругов SVG. Проблема в том, что мои круги SVG из Gephi на самом деле являются кривыми Безье. Например:

<path fill="#D52A2A" d="M663.395,426.958c0-2.869-2.324-5.194-5.193-5.194s-5.191,2.325-5.191,5.194
c0,2.867,2.322,5.189,5.191,5.189C661.069,432.148,663.395,429.826,663.395,426.958"/>

Есть ли способ преобразовать такой путь в стандартный элемент круга SVG с x, y и радиусом?


svg gephi raphael adobe-illustrator
person mhkeller    schedule 13.06.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете проанализировать пути, но проще, если вы знаете, какие пути представляют собой круги, тогда вы можете сделать быстрое приближение, подобное этому:

var p = document.querySelector("path");
var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
var b = p.getBBox();
c.cx.baseVal.value = b.x + b.width/2;
c.cy.baseVal.value = b.y + b.height/2;
c.r.baseVal.value = b.width/2; // assuming width and height are the same
p.parentNode.appendChild(c);

Подсказки о том, что ваш путь представляет собой круг, могут заключаться в том, что ширина и высота bbox очень близки к равным, или что выходной атрибут d gephi всегда использует одну и ту же форму для кругов (не уверен, что это так).

Gephi имеет открытый исходный код, поэтому другой вариант — заставить его выводить то, с чего вы хотите начать.

Обновление: вот jsfiddle, показывающий это.

person Erik Dahlström    schedule 14.06.2012
comment
В этом есть смысл. Просто основной вопрос о том, как заставить парсер работать. Как вы загружаете файл svg для запуска селектора document.querySelector(path)? Не могли бы вы сделать что-то вроде $.ajax через jquery и заменить документ данными? Или загрузить его как переменную, как в примере с Raphael Tiger ссылка, и выбрать переменную? - person mhkeller; 14.06.2012