问题标签 [dagre-d3]

I am trying to draw directed acyclic graph using d3.js. While searching for the layout, I came across Dagre but it seems to be of less use as I do not want to use DOT based code anywhere. If anyone knows about pure Javascript solution for this or plugin/custom layout for DAG, please let me know. Thanks in advance.

我正在尝试使用dagre-d3创建 DAG 。这些 DAG 的数据来自数据库，每个 DAG 都不同，因此，在将所有节点和边添加到图形之前，我不知道给出包含 svg 的宽度/高度。

所以理想情况下，我会在添加所有节点和边之后调用类似的东西d3.select("#svg1").resize_to_match_contents()，以确保所有节点都是可见的并且 svg 不是太大。当然没有这样的功能，我也不知道怎么实现。我知道我可以调用d3.select("#svg1").attr("height", "10")来设置高度，但不知道如何检索/计算<g>SVG 内元素的高度。

在 \projects 目录中，我按照dagre-d3 Github 页面上的说明输入了$ npm install dagre-d3. 然后我$ make按照构建说明输入了命令。没啥事儿。错误信息make: ** No targets specified and no makefile found. Stop.显示。我从 Github 存储库创建了一个 Makefile，$ make运行时错误为make: ** No rule to make target 'browser.js', needed by 'build/dagre-d3.js'. Stop..

我以前从未使用过 npm，但我的猜测是代码作者使用 .npmignore 遗漏了一些文件

我是一名本科生合作社，目前正在为我的团队开发一个网页项目。一开始，我选择使用 dagre-d3 库来构建图形，它们在 Chrome 上运行良好。然后我意识到 SVG 中的 ForeignObject 元素在 IE 上不起作用（它恰好是支持的主要浏览器）。

由于我的目标本质上是在每个图形组件中填充 HTML 内容，我想知道是否有任何解决方法可以在仍然使用 dagre-d3 的 IE 上实现这一点。或者对不同的图形库有什么建议？

更新：

本质上，我想创建如下屏幕截图所示的图形：

下面是我现在使用 dagre-d3 构建图形的代码：

HTML 片段：

JS 片段：

我想生成一个从 json 模型获取输入的图形。我正在使用 dagre-d3.js。我能够生成节点，也能够静态连接节点。方法 graph.addEdge(null,"A","B") 连接两个节点。但我想动态创建边缘。有没有办法以这种方式生成图表？

我有一个由 d3 制作的图表，上面有 dagre-d3 用于绘制有向图。这给了我渲染图表的期望：

要编辑构建图表的数据，每个元素都是可点击的。这对于使用标签渲染边缘的情况很好，但它们并不总是有标签，导致未标记的边缘很难单击以进行编辑。这些分配给边缘的样式是：

渲染的 svg 是：

在不更改 dagre-d3 中的代码以在线条上添加过度绘制的情况下，就像我在其他 SVG 建议中看到的那样，我能做些什么来增加这些可点击元素周围的区域？我已经尝试过样式中的padding、margin和各种值，pointer-events但无济于事。

在某些情况下，我需要重新加载图表并重新绘制图表并将其设置为初始位置和缩放而不刷新页面（使用 jquery 和 ajax）。我使用的是https://github.com/cpettitt/dagre-d3上的示例代码（不是交互式的，是用指南编写的），并使用动态查询加载边缘和节点。

但是，当我重新加载节点和边缘并再次进行渲染时，$("g.zoom) 的位置和比例保持在原来的位置。我尝试编辑 $("g.zoom) 的属性“transform”和“scale”属性。 zoom") 使用 jQuery，但是当用户拖动或缩放图形时，它的比例和位置会变回来。

我在https://github.com/cpettitt/dagre-d3/issues/17上尝试了解决方案来重置 svg，

但在那之后缩放不可用。

此外，我想知道是否有任何方法：

1. 计算适当的比例以显示整个图形（有时我需要绘制一个非常大的图形）
2. 双击图片会放大到固定大小，而不是越来越大，再次双击会回到可以查看整张图的比例尺

我希望我已经让自己明白了。:)

我正在使用 degre-d3 并且在获取单击节点的节点数据时遇到问题。单击时我有一个事件，但 d3.select(this) 似乎没有获得相关数据（如果可能，我希望获得节点名称、标签和其他对象数据。

编辑：10.09.2014：这里说我必须覆盖 renderer.drawNodes 方法： https ://github.com/cpettitt/dagre-d3/issues/67

这是指定的代码：

我不确定我应该如何以及在哪里用这段代码覆盖......

我创建了一个简单的 Dagre 示例，以在单击图中的现有节点时动态添加节点。但是，重新渲染会在同一层内创建不同的相对顺序。反正有这个问题吗？

小提琴在这里可用：http: //jsfiddle.net/gke2dann/

提前致谢。

PS：另外，有没有办法让图形更新使用那些花哨的 d3 转换？

我已经能够使用 dagre 绘制有向图。但是，现在我想在单击它时删除一个节点/边缘。我可以使用 g.delEdge 和 g.delNode 进行删除，但我如何知道有人点击了该节点？请在下面查看我的 javascript dagre 代码并告诉我需要添加的内容。（我正在从 json 文件中读取所需的节点和边，解析数据并绘制它们）