D3.js 在javascript/d3中读取点文件

是否有一种标准的方式来读取和解析javascript中的点图文件，理想的方式是在d3中很好地工作

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

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

---

要获得用Javascript呈现的Graphviz点文件，请结合和库

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

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

一个简单的自包含示例是：

window.onload=函数{ //将点语法解析为graphlib对象。 var g=graphlibDot.read '有向图{\n'+ 'a->b；\n'+ ' }' //使用d3渲染graphlib对象。 var render=new dagreD3.render； renderd3.g，g； //可选-根据内容调整SVG元素的大小。 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{ 溢出：隐藏； } .node rect{ 中风：333例； 笔划宽度：1.5px； 填充：fff； } edgeLabel rect先生{ 填充：fff； } 埃杰帕斯先生{ 中风：333例； 笔划宽度：1.5px； 填充：无； }

---

同样的例子，使用最新版本的graphlib dot和dagre-d3

window.onload=函数{ //将点语法解析为graphlib对象。 var g=graphlibDot.read '有向图{\n'+ 'a->b；\n'+ ' }' //使用d3渲染graphlib对象。 var renderer=dagreD3.render； d3.selectsvg g.callrenderer，g； //可选-根据内容调整SVG元素的大小。 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{ 溢出：隐藏； } .node rect{ 中风：333例； 笔划宽度：1.5px； 填充：fff； } edgeLabel rect先生{ 填充：fff； } 埃杰帕斯先生{ 中风：333例； 笔划宽度：1.5px； 填充：无； }

---

派对迟到了，但如果您仍然感兴趣，这里有一种方法可以使用我刚刚发布的新插件：

d3.selectgraph.graphviz .renderDot'digraph{a->b}；

---

这个问题要求在javascript或D3js中可视化.dot文件。我认为最高评分的答案对你们大多数人都有效

我不开心是因为以下三个原因：

除了D3js之外，它还包括lowdash、dagre和graphlib等库，并且是重量级的。 解析器输出不是D3js friedly数据结构。 使用非D3js风格的API。 这就是为什么我创建了一个适配器，它只需更改一条语句，就可以将.dot文件与数千个D3js示例一起使用。如果您有一些D3js可视化处理以下数据结构：

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

只需包含以下脚本并调用d3.dot即可：

---

你看到了吗？是的，但还没能让它工作…这看起来很棒！不过，我对你的例子有点意见。。我的图形比屏幕大，并且没有滚动条可供平移。。有没有一种简单的方法可以解决这个问题？您需要设置SVG元素的宽度和高度。我还没有找到一种从图表内容中自动设置这些值的好方法，所以我目前将它们设置为非常大的值，或者使用试错法。我的图表是动态生成的，所以从内容中找出它们肯定很好。。如果我有办法，我会告诉你的！我已经在Firefox和Chrome中使用了一些东西，但还没有进行广泛的测试。渲染图形后，在SVG元素上调用getBBox以获取内容的边界框，然后根据边界框和任何填充设置style.width和style.height属性。我将更新示例以反映这一点。太好了！如何将var g更改为从文件读取？这是谎言吗：fs.readFileSync'graph.dot'、'UTF-8'？这段更新的代码可以工作，但是点文件输出的svg呈现非常依赖于节点和边的解析顺序。旧版本似乎没有问题地呈现点文件。这正是我想要的。我很惊讶这里面有2.5k行代码。精彩的东西-我将尝试一下，如果它有效的话，我将与其他人讨论它，因为我尝试过的许多其他途径，正如你所说，涉及到无数的依赖关系。这值得更广泛的"关注",-感谢您在@magjac发布此代码片段，并提供d3 graphgiz插件！我认为第一个标签中的//d3js.org前面缺少https。谢谢。固定的然而，现在我得到了一个错误

---

我不明白的r…@magjac hm，我这边没有同样的问题。。。可能与您计算机上的证书有关，因为url使用https？除了示例没有运行之外，我还测试了它是保留图形格式的最佳解决方案

<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) {...});