关于d3.js：在javascript / d3中读取DOT文件


Reading DOT files in javascript/d3

有没有一种标准方法来读取和解析javascript中的DOT图形文件，理想情况下会在d3中很好地工作？

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

1
2
3
d3.text("graph.dot", function(error, dotGraph) {
    ....
)};
相关讨论

要获取以Javascript呈现的Graphviz DOT文件，请组合graphlib-dot和dagre-d3库。

graphlibDot.read()方法采用DOT语法中的图形或有向图定义，并生成图形对象。然后，dagreD3.render()方法可以将此图形对象输出到SVG。

然后，您可以使用其他D3方法向图形添加功能，并根据需要从graphlib图形对象中检索其他节点和边属性。

一个简单的独立示例是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = function() {
  // Parse the DOT syntax into a graphlib object.
  var g = graphlibDot.read(
    'digraph {\
' +
    '    a -> b;\
' +
    '    }'
  )

  // Render the graphlib object using d3.
  var render = new dagreD3.render();
  render(d3.select("svg g"), 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";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://d3js.org/d3.v5.min.js">
<script src="https://dagrejs.github.io/project/graphlib-dot/v0.6.4/graphlib-dot.min.js">
<script src="https://dagrejs.github.io/project/dagre-d3/v0.5.0/dagre-d3.min.js">

<html>

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

</html>

相关讨论

参加聚会晚了，但是如果您仍然感兴趣，可以通过以下方法使用我刚刚发布的新d3-graphviz插件：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js">
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js">
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.0.4/d3-graphviz.min.js">



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

这个问题要求在javascript或D3js中可视化.dot文件的可能性。我认为，评分最高的解决方案将对大多数人适用。

由于以下三个原因，我感到不高兴：

  • 除了D3js之外，它还涉及诸如lowdash，dagre和graphlib之类的库，并且重量级。
  • 解析器输出不是D3js"油炸的"数据结构。
  • 不是D3js风格的用法(API)。

    • 这就是为什么我创建了一个适配器的原因，该适配器基本上只允许您通过更改一条语句就可以将.dot文件与数千个D3js样本中的任何一个一起使用。如果您对以下数据结构有一些D3js可视化效果：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     <wyn> {
    " nodes"：[{" id"：" Myriel"}，{" id"："拿破仑\ n<div class="suo-content">[collapse title=""]<ul><li>
    这正是我想要的。我很惊讶其中有2.5k行代码。很棒的东西-我会尝试一下，如果可行的话，与其他人谈论，因为正如您所说，我尝试过的许多其他路线都涉及数以亿计的依赖项。这值得更广泛的了解；-)</li></ul>[/collapse]</div><hr>
    <p>
    同一示例，使用最新版本的graphlib-dot和dagre-d3。
    </p>

    <p>


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

          // 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";
        }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js">
    <script src="http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.min.js">
    <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js">

        <html>

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

        </html>

    相关讨论