2

我看到很多像这样开头的 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 的新手,仍在学习 - 我错过了什么?谢谢你的帮助。

4

1 回答 1

0

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

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

并在这里使用:

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

于 2015-04-20T13:10:36.820 回答