在javascript / d3中读取DOT文件

时间:2014-03-23 18:56:19

标签: d3.js dot

有没有一种标准的方法可以在javascript中读取和解析DOT图形文件,理想情况是在d3中可以很好地工作?

目前,我唯一能想到的就是阅读纯文本并进行自己的解析。希望这会重新发明轮子。

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

4 个答案:

答案 0 :(得分:39)

要获取使用Javascript呈现的Graphviz DOT文件,请合并graphlib-dotdagre-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>
&#13;
&#13;
&#13;

答案 1 :(得分:5)

晚会,但如果您仍然感兴趣,可以使用我刚刚发布的新d3-graphviz插件来实现这一目标:

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

答案 2 :(得分:4)

相同的例子,使用最新版本的graphlib-dot和dagre-d3。

&#13;
&#13;
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";
    }
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

该问题要求可以在.dotjavascript中显示D3js个文件。我认为最高等级答案的解决方案对大多数人都有用。

由于以下三个原因,我感到不快:

  1. lowdashdagregraphlib之类的图书馆除D3js外还涉及重量级。
  2. 解析器输出不是D3js&#34;炒得&#34;数据结构。
  3. 非D3js风格的用法(API)。
  4. 这就是为什么我创建了一个适配器,它基本上允许您通过更改一个语句,将.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 repository with code and examples