问题标签 [dagre-d3]

我目前正在使用 dagre-d3 和 graphlib API 来绘制有向图。我使用的语言是打字稿。我的用例是我不想一次渲染整个图表。我需要实现的是首先显示一些节点，然后通过单击当前节点动态添加相邻节点。我的问题集中在如何更新图表上。我用来重新渲染的 API 仍然是 dagreD3.render()。除此之外，我没有在 dagre-d3 中找到其他 API 来添加额外的节点。似乎它重新渲染了整个图，而不仅仅是更新添加的节点，因为我注意到当我第二次调用 dagreD3.render() 时节点的顺序发生了变化。有没有办法只添加额外的节点而不改变现有节点的位置？

此外，我在 render(inner,g) 函数之后设置了单击事件处理程序和一些样式。如果我使用 dagreD3.render() 重新渲染图形，我需要再次设置事件处理程序和样式。我正确使用 dagreD3.render() 吗？

我正在使用打字稿语言。所以代码在一个类中。我将 Graph 和 render 设置为类中的成员。它们用于这两个功能。

我正在使用库dagre-d3将图形呈现为 SVG。基本上，我需要在新打开的选项卡中呈现这样的 SVG，以便在运行此脚本时，它会打开一个新选项卡，显示由 dagre-d3 呈现的 SVG。

我已经尝试过使用 onLoad 语句。

这是我想在新打开的选项卡中运行的脚本类型：

这是我尝试编写一个脚本来打开一个新选项卡并执行一个使用 dagre-d3 呈现 SVG 的脚本（这将在上述代码之后的同一个 html 文件中）：

预期结果是在新选项卡浏览器选项卡中呈现 SVG，但当前新打开的选项卡是空白的。

我对前端工作不是很有经验，所以我很感激任何帮助！

我有一个用dagre-d3完成的有向无环图。是否有可能将节点放在不同的级别并使用一些代码更改节点的位置？这个库有一些“等级限制”，但它看起来在最新版本中不起作用。我目前的建议是添加一些链接并在此之后隐藏它们，但这是最后可能的选择，我真的想避免它。

目前，我的图表如下所示，我的目标是将一个集群放在另一个集群下

我有一个使用 JointJs 生成的图表，它使用了由 jointjs 提供的 Dagre 布局。目前，图表从上到下对齐，这是正确的方式，但完整的图表会与纸张的左侧对齐。

我需要将图表水平对齐在纸的中间。

当前使用的配置是这样的：

我看到使图形从上到下流动的选项被赋予rankDir: "TB"。是否有任何类似的选项可以将其水平对齐到中间而不是默认情况下的左侧？或任何其他可以这样做的方式。

我想创建一个 DAG，让 react 负责渲染（使用钩子进行状态管理），而 d3 只进行计算。使用 dagre 计算 x、y 和点坐标可以正常工作。现在我想在边缘添加箭头，为此我首先需要使用 dagre-d3 render() 函数。

但是我无法弄清楚如何使渲染功能与我当前的设置一起工作（或者如果它甚至可能的话）。

我有两个组件；GraphWrapper 和 DependencyGraph。GraphWrapper 检索并保存数据，并呈现 svg 元素。DependencyGraph 是一个返回分组元素的功能组件。

GraphWrapper 看起来像这样

依赖图：

据我了解，我需要通过 dagre-d3 渲染函数传递图形以添加边缘箭头和更多类似的东西。在 dagre-d3 文档中它说：

但我只是不知道如何使用我当前的设置来做到这一点。请帮忙？我要问的甚至可能吗？

我正在研究 dagre-d3 的角度。并且卡在了中间。

问题：

1. 节点之间没有出现链接。
2. 节点上的标签不可见。

https://codesandbox.io/s/angular-graph-kq2nb

我浏览了一些与此相关的帖子，但找不到我所缺少的。

任何帮助表示赞赏。

我正在尝试将 Html 标签放在 dagre-d3 SVG 图中，它在 Firefox 和 Chrome 中运行良好，但在自定义 HTML 中将位置添加为相对或绝对位置时，在 Safari 中似乎存在问题。

这是我的CSS：

HTML：

铬输出：

Safari 中的问题：

谢谢

我在使用 Javascript 生成漂亮的家谱时遇到问题。

要求：

• 每个孩子都应该连接到树中的两个父母，而不是像某些图表中的一个
• 我希望配偶在树上彼此相邻（垂直位置相同）
• 我想把节点按世代垂直排列，让你一眼就能看到同一个年代出生的人。
• 随着时间的推移，一个人可以有多个配偶，并且每个人都有孩子
• 父母和孩子可以在树中自由添加，而不只是“从一个人向上追溯”

我尝试过的最接近这一点：

1. Cytoscape JS以Dagre作为布局引擎，并启用了曲线样式：出租车边缘。

   （随机数据图表。实线为亲子关系，虚线为配偶）

   问题是配偶彼此不一致。Dagre 历来支持“等级”作为节点的参数，这意味着您可以强制某些节点处于特定高度（如果您愿意，可以将其视为“一代”）。不幸的是，它不再起作用了，负责的开发者也不再为这个项目工作了。这将很好地解决我的问题。

我尝试过但失败的其他事情：

1. 将 dagre 降级到支持等级的旧版本？

   还没有与任何版本的 dagre 合作。

2. D3与dagre-d3

   和上面的问题一样，因为 dagre-d3 是 dagre 的修改版本，这意味着它不支持分代排序。

3. yFiles 家谱演示看起来很棒，但是是商业的。对于我的目的（希望任何人建立自己的家谱），单个开发人员许可证的成本是 26.000 美元（！？！）。显然不能接受。

   

我的问题

是否可以像我上面描述的那样垂直对齐我的 cytoscape/dagre 图中的节点？

如果没有，我愿意尝试其他库和其他布局算法。

我正在寻找一个看起来类似于 yFiles 解决方案但使用开源工具的工作示例。

我正在尝试Vue2使用dagre-d3用于渲染有向图的非常简单的示例。不幸的是，即使是非常简单的例子，它也行不通。在网上其他地方找到的示例使用的是旧版本的d3. 目前，Vue2app 大多是带有typescriptas 语言的路由器的默认模板。Diagram组件在javascript（由于我的代码中缺少类型d3和dagre-d3）。

运行下面提到的组件时，会发生以下错误，并且<svg>块中没有显示任何内容。

它发生在这条线上

我唯一能想到的是我可能缺少一些依赖项，或者所有组件都必须是打字稿。

帮助？

图.vue：

Codesanbox 链接在这里

我正在使用 dagre-d3 库来创建流路。我需要为每个标签都有自定义组件，但它不呈现反应组件，但是如果标签是简单的 html，它确实可以正确呈现。我需要做什么？以下是我要实现的示例，第一个节点应该是组件，但它呈现一个简单的空框代替它：

代码沙盒 URL