19

我使用 dagre 绘制有向图，但我试图了解 svg、d3、dagre 和 graphlib 是如何相互依赖的？基本上，一个停止，另一个开始。

我会试着指出我能收集到的东西，我的理解有限。

  1. svg：（是一种基于 XML 的矢量图像格式，但基本上是它）是一个 html 标签，您可以使用它绘制圆形、椭圆、矩形等，然后使用 g 元素对两个或多个形状进行分组并应用变换等。

  2. d3 : d3 是一个 javascript 库，它基本上允许您将数据与 svg 结合起来。因此，不是每次都编写 svg 标签，而是基本上使用编程、循环、数据等并创建 svg 代码。

    现在来到 dagre，dagre-d3 和 graphlib 是我遇到问题的地方，假设我上面所说的一切都有意义:)

  3. dagre,dagre-d3：这是 dagre 页面所说的“ Dagre 是一个 JavaScript 库，可以轻松地在客户端布局有向图。dagre-d3 库充当 dagre 的前端，提供实际渲染使用 D3。 ”

    有人可以向我解释一下吗？那么我可以在 dagre、dagre-d3 中使用 d3 函数吗？嗯..我已经很困惑了，你能用一个例子解释一下所有这些是如何共存的吗？这段代码片段让我想到了：

    var oldDrawNodes = renderer.drawNodes();
renderer.drawNodes(function(graph, root) {
  var svgNodes = oldDrawNodes(graph, root);
  svgNodes.each(function(u) { 
     d3.select(this).classed(graph.node(u).nodeclass, true); 
  });
  return svgNodes;
});

    在这里，drawNodes 是来自 dagre-d3 的函数，但它被覆盖了，我们在其中传递了一个 d3 函数（d3.select(this).classed）。嗯……这是怎么回事？我认为 d3.select 只能用于 html 元素？这里的“这个”是什么？

  4. graphlib：这是 graphlib 页面，它说它为多图提供数据结构。但我的意思是，这些库是为 d3 还是为 dagre-d3 构建的？

我知道我听起来很困惑，但你明白了！如果有人可以用一个例子向我解释这些是如何相关的以及可以在什么中使用哪些功能，我将能够接受。

谢谢。

4

1 回答 1

24

graphlib 提供了表示图的数据结构。它不进行布局或渲染。所以下面是纯graphlib：

var g = new Graph();
g.setNode(...);
g.setEdge(...);

dagre 执行节点的布局（x 和 y 定位），其中节点由 graphlib 图表示。它不进行渲染。大多数时候你不会自己调用它，除非你想在没有 dagre-d3 的情况下进行自定义渲染。

dagre-d3 使用 dagre 进行布局，并使用 d3 进行渲染。请注意，dagre-d3 默认包括 dagre 和 graphlib，如dagreD3.dagre和dagreD3.graphlib.

SVG 是 d3 的输出格式。它是一种通用的矢量图形格式，也可以嵌入普通的 HTML。每个 SVG 节点也是一个 DOM 节点。这就是为什么也d3.select适用于 SVG 节点的原因。

您发布的片段似乎执行后处理以在节点上设置类。从那时起，您链接到的示例似乎已经更新，并且不再包含该代码。

于 2014-11-14T10:17:16.490 回答