javascript - 无法从具有树布局的力图中调用force.tick()

标签 javascript svg d3.js force-layout

我有一个基于force-collapsable example的可视化我想加快或跳过初始节点移动以使图形尽快达到平衡。

我已遵循此 answer 中的建议并从我的代码中调用了tick(),但它在强制可协作示例中不起作用,因为强制对象上没有tick或alpha方法。

这是修改后我的代码的样子,我删除了 on tick 调用并在末尾添加了force.tick() 调用:

var force = d3.layout.force()  // line 38 in the example
    //.on("tick", tick)        // commented out as I call tick instead
    .charge(function(d) { return d._children ? -d.size / 100 : -30; })
    .linkDistance(function(d) { return d.target._children ? 80 : 30; })
    .size([w, h - 160]);

function update() {            // line 56 in the example
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

  force                        // line 60 in the example
    .nodes(nodes)
    .links(links)
    .start();

  force.tick()                 // added by me to cause a tick and the point of error

但是调用失败并显示“未捕获类型错误:未定义不是函数”,因为该方法不存在。

当我调用它时,强制对象具有以下值(取自 Chrome 调试器):

charge: function (x) { distance: function (x) { drag: function () { friction: function (x) { gravity: function (x) { linkDistance: function (x) { linkStrength: function (x) { links: function (x) { nodes: function (x) { on: function (type, listener) { resume: function () { size: function (x) { start: function () { stop: function () { theta: function (x) { <strong>proto</strong>: Object

为什么此示例中的力对象与其他不使用树布局的力布局示例不同?如何直接调用tick()?

最佳答案

我发现,如果我删除了对 d3.geom.js 和 d3.layout.js 的引用,我可以调用 tick(),并且在没有这些文件的情况下不会对我的布局产生负面影响。

关于javascript - 无法从具有树布局的力图中调用force.tick(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24861107/

相关文章:

javascript - 如何让多个 SVG 绘图在滚动时平滑渲染?

javascript - (JavaScript) 如何在 Phaser 3 中将图像定义为变量

javascript - 如何使用javascript显示某个div内的第n个div?

python - 如何将文本保存在可在 svg 文件中编辑的 python 图中?

html - 使用 CSS 操作外部 svg 文件样式属性

javascript - html 文件无法从我的模板文件夹中运行

javascript - D3 : x-axis with time interval of a year

javascript - 在 chrome 扩展中加载页面之前修改 CSS?

javascript - 带有循环javascript的数字范围

javascript - 停止 SVG 组事件传播