Как svg, d3, dagre, dagre-d3 и graphlib зависят друг от друга?

Question

Я использовал dagre для рисования ориентированных графов, но я пытаюсь понять, как svg, d3, dagre и graphlib зависят друг от друга? В основном, где один останавливается, а другой начинается.

Я попытаюсь указать, что я мог бы собрать с моим ограниченным пониманием.

1. SVG: (это векторный формат изображения XML на основе, но в основном это) является тег HTML с помощью которого вы можете нарисовать круг, эллипс, прямоугольник и т.д., и затем использовать г элемент группы двух или больше форм и применяемых преобразований и т. д.

2. d3: d3 - это библиотека javascript, которая в основном позволяет комбинировать данные с svg. Таким образом, вместо написания svg-тегов каждый раз вы в основном используете программирование, петли, данные и т. Д. И создаете код svg.

   Сейчас подходит к dagre, dagre-d3 и graphlib, где у меня есть проблема при условии, что все, что я сказал выше, имеет смысл :)

3. dagre, dagre-d3: Это то, что dagre страница говорит «Dagre библиотека JavaScript, что позволяет легко раскладывать ориентированные графы на стороне клиента. библиотека dagre-d3 действует на передний конец dagre, обеспечивая фактическую визуализацию с помощью D3.»

   Может кто-нибудь, пожалуйста, объясните мне это? Могу ли я использовать функции d3 внутри dagre, dagre-d3? Хм .. Я уже смущен, Не могли бы вы объяснить на примере, как все это сосуществуют? Это code snippet то, что заставило меня задуматься:

   var oldDrawNodes = renderer.drawNodes(); 
   renderer.drawNodes(function(graph, root) { 
       var svgNodes = oldDrawNodes(graph, root); 
       svgNodes.each(function(u) { 
       d3.select(this).classed(graph.node(u).nodeclass, true); 
       }); 
       return svgNodes; 
   }); 
   

   Здесь drawNodes является функцией от dagre-d3, но она будучи более охваченном, и мы проходим функцию d3 (d3.select (это) .classed) внутри. Хм ... как это происходит? Я думал, что d3.select можно сделать только для элементов html? Что это такое?

4. graphlib: Это страница graphlib, в которой говорится, что она предоставляет структуры данных для мультиграфов. Но я имею в виду, эти библиотеки построены для d3 или для dagre-d3?

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

Спасибо.

Answer 1

graphlib предоставляет структуру данных, представляющую график. Он не выполняет макет или рендеринг. Таким образом, следующий чисто graphlib:

var g = new Graph(); 
g.setNode(...); 
g.setEdge(...); 

dagre выполняет компоновку (х и у) местоположения узлов, где узлы представлены на графике graphlib. Это не делает рендеринг. Большую часть времени вы не назовете это сами, если вы не хотите выполнять индивидуальный рендеринг без dagre-d3.

dagre-d3 использует dagre для макета и визуализирует его с помощью d3.Обратите внимание, что dagre-d3 включает в себя dagre и graphlib по умолчанию, как dagreD3.dagre и dagreD3.graphlib.

SVG - это выходной формат для d3. Это универсальный векторный графический формат, который также может иметь встроенный HTML-код. Каждый узел SVG также является узлом DOM. Вот почему d3.select также работает с узлами SVG.

Снепплет, который вы опубликовали, как представляется, выполняет пост-обработку для установки классов на узлах. Пример, с которым вы связаны, кажется, был обновлен с тех пор и больше не включает этот код.