Я создал веб-службу, которая генерирует файлы макета точек и xdot для графика, используя GraphViz на сервере. Есть ли способ визуализировать файлы точек или xdot с помощью d3.js в браузере клиентов?
Если нет, существуют ли другие библиотеки JavaScript, которые могут визуализировать макеты точек или xdot?
Документация GraphViz говорит:
1 базовый рисунок графика
точка рисует ориентированные графы. Он читает текстовые файлы с атрибутами графа и записывает рисунки либо в виде графических файлов, либо в графическом формате, таком как GIF, PNG, SVG, PDF или PostScript.
Если вы можете получить свой график в виде SVG, вы можете манипулировать им с помощью d3. В этом ответе описывается, как прочитать внешний файл SVG как XML и вставить его в документ.
Ооооочень поздно на вечеринку, но теперь вы можете сделать это с помощью d3-graphviz:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.1.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>Также посмотрите эту демонстрацию.
Было несколько решений, но ни одно из них не дало того, чего я действительно хотел: взять хороший, работающий D3js код визуализации графика и передать ему .dot файл вместо .json файла.
Вот почему я создал адаптер, который позволит вам использовать .dot файлы с любым из тысяч D3js образцов, изменив всего одну инструкцию. Если у вас есть D3js визуализация, работающая со следующей структурой данных:
{
"nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
"links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
}
Просто включите следующий скрипт и вызовите d3.dot:
<script src="https://cdn.jsdelivr.net/gh/gmamaladze/[email protected]/build/d3-dot-graph.min.js"></script>
<script>
d3.dot(url, function(graph) {
...
});
</script>
вместо:
d3.json(url, function(graph) {...});
Репозиторий GitHub с кодом и примерами
