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

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

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

d3.text("graph.dot", function(error, dotGraph) {
    ....
)};

Ответы

Ответ 1

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

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

Затем вы можете использовать дополнительные методы D3 для добавления функциональности в график, получения дополнительных node и краевых атрибутов из графического объекта 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>

Ответ 2

Поздно, но если вы все еще заинтересованы, вот способ сделать это с помощью нового плагина 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>

Ответ 3

Тот же пример, используя последнюю версию graphlib-точки и 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>

Ответ 4

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

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

Он включает библиотеки, такие как lowdash, dagre и graphlib дополнительно к D3js и имеет тяжелый вес.
Вывод Parser не является D3js "жалкой" структурой данных.
Использование (API) не в стиле D3js.

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

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

Просто включите следующие script и вызовите 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 с кодом и примерами