Odczyt plików kropkowych w javascript / d3

Czy istnieje standardowy sposób odczytywania i analizowania plików grafów kropkowych w javascript, najlepiej w sposób, który będzie działał ładnie w d3?

Obecnie jedyne, co mogę zrobić, to czytać zwykły tekst i robić własne parsowanie. Mam nadzieję, że to będzie odkrycie koła na nowo.

d3.text("graph.dot", function(error, dotGraph) {
    ....
)};
 28
d3.jsdot
Author: ajwood, 2014-03-23
Source

4 answers

Aby uzyskać pliki Graphviz DOT renderowane w Javascript, połącz biblioteki graphlib-dot i dagre-d3 .

Metoda graphlibDot.parse() przyjmuje definicję grafu lub digrafu w składni kropek i tworzy obiekt grafu. Metoda dagreD3.Renderer.run() może następnie przesłać ten obiekt graficzny do SVG.

Możesz następnie użyć dodatkowych metod D3, aby dodać funkcjonalność do wykresu, pobierając dodatkowe atrybuty węzła i krawędzi z obiektu graphlib graph.

Trywialny samodzielnym przykładem jest: 

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>
 38
Author: Richard Neish,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-05 15:39:40

Ten sam przykład, używając najnowszej wersji graphlib-dot i 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
Author: PokerFace,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-25 13:34:32

Późno na imprezę, ale jeśli nadal jesteś zainteresowany, oto sposób, aby to zrobić z nową wtyczką D3-graphviz , którą właśnie wypuściłem: 

<!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
Author: magjac,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-10 14:27:34

Pytanie prosi o możliwość wizualizacji .dot plików w javascript lub D3js. Myślę, że rozwiązanie z najwyżej ocenionej odpowiedzi będzie działać dla większości z was.

Byłem nieszczęśliwy z tych 3 Powodów:

  1. dotyczy bibliotek takich jak lowdash, dagre i graphlib dodatkowo do D3js i jest ciężki.
  2. wyjście parsera nie jest D3js "friedly" struktura danych.
  3. Usage (API) in not d3js style.

Dlatego stworzyłem adapter, który w zasadzie pozwoli Ci używać plików .dot z dowolnymi tysiącami próbek D3js, zmieniając tylko jedną instrukcję. Jeśli posiadasz wizualizację D3js pracującą na następującej strukturze danych: 

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

Wystarczy załączyć następujący skrypt i wywołać 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>

Zamiast: 

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

Repozytorium GitHub z kodem i przykładami

 0
Author: George Mamaladze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-01 14:34:39