dagreD3 - 渲染器和有向图对象是不是已弃用？如何进行过渡和布局？

Posted 2023-02-19

【中文标题】dagreD3 - 渲染器和有向图对象是不是已弃用？如何进行过渡和布局？

【英文标题】：dagreD3 - Are Renderer and DiGraph objects deprecated? How to do Transitions and Layouts?dagreD3 - 渲染器和有向图对象是否已弃用？如何进行过渡和布局？

【发布时间】：2015-05-19 00:03:02

【问题描述】：

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

var g = new dagreD3.Digraph();
var renderer = new dagreD3.Renderer();
var layout = dagre.layout();

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

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>

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

var g = new dagreD3.graphlib.Graph();
var inner = d3.select("g");
var render = new dagreD3.render();  // Create the renderer
    render(inner, g);  // Run the renderer.

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

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

// Custom transition function
function transition(selection) 
  return selection.transition().duration(500);

renderer.transition(transition);

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

g.transition().removeNode(d);
g.transition().removeEdge(v);

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

g.removeNode(d);
g.removeEdge(v);
render(inner, g);

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

【参考方案1】：

你可以在这里看到你的答案：

g.graph().transition = function(selection) 
  return selection.transition().duration(500);
;

在这里使用：

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html