web-dev-qa-db-ja.com

javascript / d3でのDOTファイルの読み取り

JavascriptでDOTグラフファイルを読み込んで解析する標準的な方法はありますか？理想的にはd3でうまく機能する方法ですか？

現在、私ができると思うことができるのは、プレーンテキストを読んで、独自の解析を行うことだけです。うまくいけば、これは車輪を再発明するでしょう。

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

Graphviz DOTファイルをJavascriptでレンダリングするには、 graphlib-dot および dagre-d ライブラリを組み合わせます。

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>
39
Richard Neish

パーティーに遅れましたが、まだ興味があるなら、ここで私がちょうどリリースした新しい 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>
5
magjac

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>
4
PokerFace

この質問は、.dotファイルをjavascriptまたはD3jsでさらに視覚化する可能性を求めています。最も評価の高い回答からの解決策は、ほとんどの人に有効だと思います。

次の3つの理由で不幸でした。

  1. それは、D3jsに加えてlowdash、dagre、およびgraphlibなどのライブラリを含み、重量があります。
  2. パーサーの出力は、D3js "friedly"データ構造ではありません。
  3. D3jsスタイルではない使用法（API）。

そのため、1つのステートメントを変更するだけで、何千もの.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リポジトリ

1
George Mamaladze