Чтение файлов DOT в javascript/d3

Есть ли стандартный способ чтения и анализа файлов графиков DOT в javascript, в идеале способ, который будет хорошо работать в d3?

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

d3.text("graph.dot", function(error, dotGraph) {
    ....
)};
Источник

4 ответа

Решение

Чтобы получить файлы Graphviz DOT, отображаемые в Javascript, объедините библиотеки graphlib-dot и dagre-d3.

graphlibDot.parse() Метод принимает определение графа или орграфа в синтаксисе DOT и создает объект графа. dagreD3.Renderer.run() Затем метод может вывести этот объект графика в SVG.

Затем вы можете использовать дополнительные методы D3 для добавления функциональности к графику, извлекая дополнительные атрибуты узла и ребра из объекта графа graphlib по мере необходимости.

Тривиальный автономный пример:

window.onload = function() {
  // Parse the DOT syntax into a graphlib object.
  var g = graphlibDot.parse(
    'digraph {\n' +
    '    a -> b;\n' +
    '    }'
  )

  // Render the graphlib object using d3.
  var renderer = new dagreD3.Renderer();
  renderer.run(g, d3.select("svg g"));


  // Optional - resize the SVG element based on the contents.
  var svg = document.querySelector('#graphContainer');
  var bbox = svg.getBBox();
  svg.style.width = bbox.width + 40.0 + "px";
  svg.style.height = bbox.height + 40.0 + "px";
}
svg {
  overflow: hidden;
}
.node rect {
  stroke: #333;
  stroke-width: 1.5px;
  fill: #fff;
}
.edgeLabel rect {
  fill: #fff;
}
.edgePath {
  stroke: #333;
  stroke-width: 1.5px;
  fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/graphlib-dot/v0.4.10/graphlib-dot.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/v0.1.5/dagre-d3.min.js"></script>

<html>

<body>
  <script type='text/javascript'>
  </script>
  <svg id="graphContainer">
    <g/>
  </svg>
</body>

</html>

Источник

Поздно до вечеринки, но если вы все еще заинтересованы, вот способ сделать это с помощью нового плагина 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.0.4/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .renderDot('digraph  {a -> b}');

</script>

Источник

Тот же пример, используя последнюю версию graphlib-dot и dagre-d3.

window.onload = function() {
      // Parse the DOT syntax into a graphlib object.
      var g = graphlibDot.read(
        'digraph {\n' +
        '    a -> b;\n' +
        '    }'
      )

      // Render the graphlib object using d3.
      var renderer = dagreD3.render();
      d3.select("svg g").call(renderer, g);


      // Optional - resize the SVG element based on the contents.
      var svg = document.querySelector('#graphContainer');
      var bbox = svg.getBBox();
      svg.style.width = bbox.width + 40.0 + "px";
      svg.style.height = bbox.height + 40.0 + "px";
    }
svg {
  overflow: hidden;
}
.node rect {
  stroke: #333;
  stroke-width: 1.5px;
  fill: #fff;
}
.edgeLabel rect {
  fill: #fff;
}
.edgePath {
  stroke: #333;
  stroke-width: 1.5px;
  fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>

    <html>

    <body>
      <script type='text/javascript'>
      </script>
      <svg id="graphContainer">
        <g/>
      </svg>
    </body>

    </html>

Источник

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

Я был несчастлив из-за этих 3 причин:

  1. Это включает в себя библиотеки, такие как lowdash, dagre а также graphlib дополнительно к D3js и в тяжелом весе.
  2. Выход парсера не D3js "Жарко" data-структура.
  3. Использование (API) не в стиле D3js.

Вот почему я создал адаптер, который в основном позволит вам использовать .dot файлы с любым из тысяч D3js образцы, изменив только одно утверждение. Если у вас есть некоторые D3js визуализация, работающая на следующей структуре данных:

{
  "nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
  "links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
}

Просто включите следующий скрипт и позвоните d3.dot:

<script src="https://cdn.jsdelivr.net/gh/gmamaladze/d3-dot-graph@1.0.0/build/d3-dot-graph.min.js"></script>
<script>

d3.dot(url, function(graph) {
   ...
});

</script>

вместо:

d3.json(url, function(graph) {...});

GitHub репозиторий с кодом и примерами

Источник
Другие вопросы по тегам