问题标签 [dagre-d3]

我使用 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 函数吗？嗯..我已经很困惑了，你能用一个例子解释一下所有这些是如何共存的吗？这段代码片段让我想到了：

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

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

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

谢谢。

有没有人使用过 dagre-d3/graphlib 中的 graph.hasEdge 函数来查看两个节点之间是否存在边。我说的是一个 API，它接收两个参数，基本上是两个节点，并检查两者之间是否存在边。

我的问题是，对我来说，这个函数总是返回 false。我尝试为两个在两者之间有一条边的节点提供它，但它仍然给我一个错误。（请注意，但是当您只提供一个参数时它可以工作，基本上是您在执行时定义的边 id graph.addEdge(edgeid, 源, 目的地);

请参阅 API 参考链接

我正在尝试创建一个自定义形状并在 svg 上设置 x 和 y 轴，到目前为止我已经完成了，但是在我的元素之上，我有一个属于引用节点的组 (g) 的变换属性，我试图更改设置自定义转换的属性，但没有任何运气。

我的问题是，如何更改整个节点的 x 和 y 位置？

用于生成节点：

翻译是 65,152，我想与对象的 x 和 y 相同，我还想更改子组（包括标签的包装器）。

查看图片以供参考

我正在使用 dagre d3 来可视化数据，制作有序图，但我一直在设置边缘。看看我卡住的这段代码

该图是有序的，顶部有 Root。从根节点我设法制作从根到所有级别为 0 的节点的边。现在我想从所有级别为 0 且有子节点的边制作边，然后从级别为 1 且有子节点的边制作边，依此类推。我已经尝试过类似的方法并将这个结构保存到 C# 中的 json 中，但是我无法将我的 C# 代码重写为 javascript，因为我是 javascript noob。

在 d3 中，我能够使用函数指定元素的填充样式。例如

有没有办法在 dagre-d3 中做同样的事情？

我试过了

我正在使用 dagre-d3.js 创建分层图。现在我需要使节点可单击并执行功能。我无法做到这一点。

目前我的一些代码看起来像

我只需要能够单击 TEST 或 TEST1 并运行我编写的函数以转到页面上具有相同名称的那个 div (TEST, TEST1)

我已经看过这个，但它对我没有帮助。 https://github.com/cpettitt/dagre-d3/issues/13 这似乎使用了我无法使用的不同方法。

请指导我

谢谢，尼希尔

我实现了功能，您可以平移和缩放整个图形，还可以拖动一个特定节点。此时我的问题是，我找不到如何在拖动节点时更新边缘的方法。

在这里你可以找到一个最小的设置：

http://codepen.io/anon/pen/XJZrxm

在：

当然，这种行为也应该适用于更多的节点和边。

我尝试使用 Dagre-D3 创建 ERM。关系应直接显示在实体属性之间。（见截图）。通过对父节点中的属性进行分组，我就可以了，但是 dagre graphlib 中的一些算法将属性节点分开以保持链接简单。我不介意有稍微复杂的链接，但将属性保持在一起......

为了说明我想要做什么，我创建了一个 jsFiddle: ERM with dagre-d3

这是屏幕截图：

我看到很多像这样开头的 dagre-D3 代码示例：

但我无法创建这 3 个对象，而是收到 JavaScript“不是函数”错误。我正在链接到“最新”的 dagreD3 库：

我可以使用我在其他示例中找到的这些对象和代码来获得工作图：

所以我的假设是 DiGraph 和 Renderer 对象是“旧的”并且已弃用，对吗？如果没有，为什么我不能创建 Renderer 和 DiGraph 对象？我是一个完整的菜鸟吗？

如果 Renderer 和 DiGraph 对象实际上已经过时，我如何获得布局和/或启用此线程中描述的转换，并使用https://github.com/cpettitt/dagre-d3/issues中的示例代码/31：

我真正想做的就是从图中删除一个节点和/或边缘，并让它“过渡”到新的布局中。我认为它看起来像这样：

我能得到的最好的工作是：

它“跳转”到新布局而不是平滑过渡。我是 D3 的新手，仍在学习 - 我错过了什么？谢谢你的帮助。

我已经设法使用 dagre-d3 图形布局库创建了一些图形。该库工作得很好，但似乎有点缺乏文档。

我的图表真的看起来像这个例子：http ://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

我真正想做的是自定义边缘，使它们看起来像这张图片：

所以，基本上，我需要自定义代表边缘的 svg 路径元素。我做了一些研究，似乎可以使用 graphviz 样式（箭头、颜色等），但还没有找到任何方法来自定义连接路径本身。

是否可以以某种方式自定义它？