使用根节点勾选后中心力定向布局(返回中心)

2023-12-05

我正在使用 D3.js 尝试强制定向布局。我需要的是按根(或其他选定的节点)将布局居中,并在刻度函数完成后将此节点返回到 svg(例如画布)中心(图形 alpha 较低)。是否可以?我找到了一个例子

http://bl.ocks.org/1080941

但我无法使根(当使用 alpha 或其他自定义刻度函数计算时)返回到中心(按此特定节点将布局居中)。

任何帮助,将不胜感激。


实际上我是这样解决的(与之前的类似但更复杂):

force.on("tick", function(e) {

     node.attr("transform", function(d) { 
         //TODO move these constants to the header section
        //center the center (root) node when graph is cooling down
        if(d.index==0){
            damper = 0.1;
            d.x = d.x + (w/2 - d.x) * (damper + 0.71) * e.alpha;
            d.y = d.y + (h/2 - d.y) * (damper + 0.71) * e.alpha;
        }
        //start is initiated when importing nodes from XML
        if(d.start === true){
            d.x = w/2;
            d.y = h/2;
            d.start = false;
        }

        r = d.name.length;
        //these setting are used for bounding box, see [http://blockses.appspot.com/1129492][1]
        d.x = Math.max(r, Math.min(w - r, d.x));
        d.y = Math.max(r, Math.min(h - r, d.y));

            return "translate("+d.x+","+d.y+")";            

     }
    );

     });   
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用根节点勾选后中心力定向布局(返回中心) 的相关文章

  • 如何在 d3.scale.ordinal() 中指定域?

    var W 100 var H 200 var data v 4 v 8 v 15 v 16 v 23 v 42 var x d3 scale linear domain 0 max x range 0 W var y d3 scale o
  • 需要帮助在 D3.js 条形图中将 x 轴刻度与条形对齐

    我有一个可用的线性条形图D3 js http d3js org 它也有基于时间的 x 轴 条形图绑定到计数属性 而轴绑定到日期属性 轴上的刻度未与条形对齐 知道如何将它们两者排列起来吗 这是 jsFiddle http jsfiddle n
  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • 需要帮助绘制多元线之间的区域 - 而不是从轴到线

    我是 d3 js 的新手 我正在努力填充多元百分位数图中线条之间的区域 我不希望在最底线下方或最顶线上方填充任何区域 第一列始终位于图表的底部 第 5 个百分位 最后一列将始终位于图表的顶部 第 95 个百分位 我需要每条线之间单独的区域段
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • 如何使 d3 饼图响应式?

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div
  • d3.js:修改树布局中的链接

    抱歉我的英语不好 我在这里使用这个例子 http bl ocks org mbostock 4339083 http bl ocks org mbostock 4339083构建树形图 但我用矩形更改了根的子级中的圆圈 现在该图有点混乱 因
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 如何根据D3中的数据创建元素?

    看着sample https github com mbostock d3 wiki Selections wiki data d3 select body selectAll div data 4 8 15 16 23 42 enter
  • 如何避免多系列折线图d3.js的工具提示重叠

    我已经在多系列折线图上创建了工具提示 如下所示在这里回答 https stackoverflow com questions 34886070 d3 js multiseries line chart with mouseover tool
  • 未捕获的类型错误:无法读取未定义的属性“albersUsa”

    以前可能有人问过这个问题 但我希望我能得到针对我遇到的问题的答案 我是 d3 的新手 我现在正在尝试绘制一个纬度 经度 当我成功完成第一个纬度 经度时 我将完成其余的工作 感谢专家的任何帮助 谢谢 尝试在特定区域绘制蜂窝基站 这是代码
  • 获取现有 SVG 元素的属性并使用 d3.js 绑定为数据

    我有一个现有的 svg 元素 例如
  • 根据子节点数量动态调整 d3 树布局的大小

    从这个例子来看http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk 20111018 tree html我已经建立了一个d3
  • d3.js 强制布局是否允许动态 linkDistance?

    我使用力布局来表示有向未加权网络 我的灵感来自以下例子 http bl ocks org mbostock 1153292 http bl ocks org mbostock 1153292 我的问题是 在我的情况下 节点之间有更多的链接
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图

随机推荐

  • 无法在字段值中使用 1(int 类型)作为 *int 类型

    为什么会产生错误 一样的int除了 with 指针 type Gim struct Active int yesVar Gim Active 1 error Cannot use 1 type int as type int in fiel
  • 如何在c中实现定时器?

    我们想在Linux平台下的C程序中添加一个定时器 我们正在尝试发送数据包 并且希望了解 1 分钟内发送了多少数据包 我们希望计时器与while正在执行发送数据包的循环 例如 while 1 send packets 该循环将继续发送数据包
  • Angular2 中使用 Angular-CLI 的环境特定服务端点

    我正在为我的 Angular2 项目使用 Angular CLI 我通过 angular2 服务调用后端 ajax 服务 我对于不同的任务有不同的服务端点 URL 我想让这些服务环境变得有意义 假设我有两个服务 客户服务 https loc
  • Boost Spirit 可选解析器和回溯

    为什么这个解析器离开 b 在属性中 即使选项不匹配 using namespace boost spirit qi std string str abc auto a char a auto b char b qi rule
  • 拥有值的一般方法(不指定“Rc”或“Box”)

    一般来说 当您不想指定时 是否有一个针对拥有值的枚举 特征how确切地说 该值是拥有的 无论共享与否 但您只想拥有它 我需要将对闭包的引用存储在结构中 这意味着它们必须与结构一样存在 当然 我无法复制它们 因此它们需要作为参考 但我不想做出
  • 如何访问向量中的最后一个值?

    假设我有一个嵌套在具有一层或两层的数据框中的向量 有没有一种快速而肮脏的方法来访问最后一个值 而不使用length 功能 类似 PERL 的东西 特殊变量 所以我想要这样的东西 dat vec1 vec2 代替 dat vec1 vec2
  • 找出两个日期之间的小时差?

    例如 我可以通过查看这两个日期来计算它们的差异 但在程序中计算时我不知道 日期 A 是2014 02 12 y m d 13 26 33且 B 是2014 02 14 y m d 11 35 06那么小时差是 46 我假设你将时间存储为字符
  • 为什么 g++ 找不到 iostream.h?

    我试图了解如何在 Ubuntu 上使用 g 和 最终 Clang 从命令行编译 C 程序 我找到了一个解释 MakeFiles 的网页 我正在遵循他们的指示 http mrbook org tutorials make 我将四个示例文件下载
  • for 循环事件驱动代码?

    在 Redis 数据存储中 我有一个键列表 我想迭代该键列表并从 Redis 获取这些值 问题是我正在使用事件驱动语言 即通过 node js 的 javascript 如果 javascript 是程序化的我可以这样做 function
  • Karate 0.9.6 到 1.0.1 升级问题与数组参数

    在空手道中发送空数组参数时 不会发送该参数 Example Given url homeUrl And path types And param filterTypes When method GET Then status 200 And
  • Firebase函数无法从源加载函数定义错误解决方案

    错误 无法从源加载函数定义 无法从 函数源生成清单 错误 ERR PACKAGE PATH NOT EXPORTED 包子路径 lib firestore 未由 Users macbook Desktop ein itin 中的 expor
  • 多值字典?

    任何人都知道一个好的实施MultiValueDictionary 基本上 我想要一个允许每个键有多个值的东西 我希望能够做类似的事情 dict Add key val 如果该键尚不存在 它将添加它 如果存在 它只会向该键添加另一个值 我只是
  • 如何使 django-registration 使用我自定义的 UserCreationForm 和 UserChangeForm?

    我正在使用 Django 1 4 开发一个网站django registration 我希望允许用户使用任意 Unicode 字符创建用户名 目前 如果有人尝试使用非拉丁字符注册 他将看到一条错误消息 负责拒绝这种非 ASCII 用户名的代
  • 使用 mvc3 下拉列表的 jquery 自动完成

    我正在使用 ASP NET MVC3 和 EF Code First 我以前没有使用过 jQuery 我想将自动完成功能添加到绑定到我的模型的下拉列表中 下拉列表存储 ID 并显示值 那么 如何连接 jQuery UI 自动完成小部件以在用
  • 删除列表中的重复项(Prolog)

    我对 Prolog 完全陌生 正在尝试一些练习 其中之一是 编写谓词集 InList OutList 它以任意输入作为输入 列表 并返回一个列表 其中每个 仅出现输入列表的元素 一次 这是我的解决方案 member X X member X
  • Android - 键盘覆盖输入框 - 即使在 Chrome 浏览器中也是如此

    是否有 HTML5 css js 解决方案可以在软键盘出现时弹出窗口内容 例如 如果您打开鸭鸭网在 Android 设备上并在输入字段中输入文本 当软键盘出现时 它会将内容向上突出 这样就不会覆盖输入框 比较一下Shottag com其中键
  • 如何使 MDI 子窗口位于其兄弟窗口之上?

    这个问题与我的上一个 我有一个 MFC VC6 MDI 应用程序 它有多个 MDI 子窗口 充当一个文档的不同视图 是否可以将其中一个框架设置为位于其他框架之上 我试过打电话 SetWindowPos GetParentFrame gt w
  • 在 Linux 上使用 gaction 更新 Google Home/Assistant 包时,Golang 运行时出现恐慌?

    我正在尝试使用本教程中的说明在 Linux 14 04 LTS 机器 不是 Windows 上构建我的第一个 Google Home 应用程序 https medium com google cloud building your firs
  • 从 PHP 中的变量返回第一句话

    我已经找到了类似的线程 sentence preg replace s 1 string 但这似乎在我的函数中不起作用 当句子作为段落的结尾结束时 似乎没有考虑第一句 有任何想法吗 Get the first se
  • 使用根节点勾选后中心力定向布局(返回中心)

    我正在使用 D3 js 尝试强制定向布局 我需要的是按根 或其他选定的节点 将布局居中 并在刻度函数完成后将此节点返回到 svg 例如画布 中心 图形 alpha 较低 是否可以 我找到了一个例子 http bl ocks org 1080