Создание двунаправленных графов в D3.js - PullRequest
Новая
       20

Создание двунаправленных графов в D3.js

0 голосов
/ 03 октября 2018

Я создаю веб-приложение, которое позволяет пользователю взаимодействовать с двунаправленным графом и играть в игры для изучения теории графов.

Я работаю над этим графическим редактором:

http://bl.ocks.org/rkirsling/5001347

Две проблемы:

  1. Я не нашел информации о том, как отобразить двунаправленную стрелку с SVG

  2. Iхотите иметь возможность выполнять вычисления на этих узлах и ссылаться на их соседние узлы и изменять их атрибуты.Поэтому я не просто хочу, чтобы это казалось, что ребра двунаправленные, я хочу, чтобы они представляли как двунаправленные в их коде, чтобы я мог ими манипулировать.

Я хочу, чтобы эта функция была доступна из Интернета.Сначала я начал этот проект с использованием Python с NetworkX и Bokeh, но столкнулся с некоторыми проблемами с отображением и обнаружил, что его развертывание в виде веб-приложения намного менее интуитивно понятно.

D3.js - мощный, красивый и хорошо документированный.Но по какой-то причине никто не сделал ничего с графиками ненаправленной силы.Это потому, что это невозможно?

PS Я думал только о добавлении стрелки в каждом направлении, но это кажется не элегантным и может иметь проблемы с отображением и ссылками.

Заранее спасибо!

1 Ответ

0 голосов
/ 04 октября 2018

Вы можете отобразить двунаправленную стрелку, используя атрибуты пути marker-start и marker-end.Определите один или несколько marker элементов в defs вашего SVG, содержащего форму наконечника стрелки, которую вы хотите использовать, присвойте каждому ID, а затем примените их к своим путям, используя css или непосредственно используя атрибут стиля.например, 

<svg width="200" height="200">
 <defs>
  <marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto">
    <path d="M10,-5L0,0L10,5" fill="#000"></path>
  </marker>
  <marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto">
   <path d="M0,-5L10,0L0,5" fill="#000"></path> 
  </marker>
 </defs>

Чтобы использовать их: 

 // apply directly using the style attribute
 <path style="marker-start: url('#start-arrow'); marker-end: url('#end-arrow');" d="M0,0L100,100" />

или 

// in your css
.arrowed {
  marker-start: url(#arrow-start);
  marker-end: url(#arrow-end);
}

// in your SVG
<path class="arrowed" d="M0,0L100,100" />

Существует также marker-mid для применения фигур к середине путей.

Рабочая демоверсия: 

.link {
  stroke: black;
  stroke-width: 3px;
  fill: none;
}

.arrowed {
  marker-start: url(#start-arrow);
  marker-end: url(#end-arrow);
}
<svg width="200" height="200">
 <defs>
  <marker id="big-arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
   <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
  </marker>
  <marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto">
    <path d="M10,-5L0,0L10,5" fill="#000"></path>
  </marker>
  <marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto">
   <path d="M0,-5L10,0L0,5" fill="#000"></path> 
  </marker>
  <marker id="blob" markerWidth="8" markerHeight="8" refX="5" refY="5">
    <circle cx="5" cy="5" r="3" style="stroke: none; fill: #000;" />
   </marker>
  </defs>
 <g>
  <path class="link" style="marker-start: url('#blob'); marker-end: url('#big-arrow');" d="M150,50L50,150" markerUnits="strokeWidth"></path>
  <path class="link arrowed" d="M150,150L50,50"></path>
 </g>
</svg>

Что касается Q2, d3 позволяет привязывать данные к элементам DOM или вычислять макеты с использованием установленных алгоритмов, но на самом деле он не справляется с большими задачами, кроме простого обхода графа.и он не содержит внутренних представлений сетей, которые могут быть аргументированы или использованы для вычислений.Его нельзя использовать для тех же видов анализа, что и для networkx.Я знаю по крайней мере одну библиотеку JS, KeyLines, которая может выполнять сетевой анализ, но это проприетарное программное обеспечение;Я уверен, что есть и другие.

...