ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 修复D3 Force Directed Layout中的节点位置

2019-09-16 18:38:00  阅读:293  来源: 互联网

标签:javascript d3-js data-visualization force-layout d3-force-directed


我希望我的力导向布局中的一些节点忽略所有力并基于节点的属性保持在固定位置,同时仍然能够被拖动并在其他节点上施加排斥并保持其链接线.

我觉得它会像这样简单:

force.on("tick", function() {
    vis.selectAll("g.node")
        .attr("transform", function(d) {
            return (d.someAttribute == true) ?
               "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
               "translate(" + d.x + "," + d.y + ")"
        });
  });

我还试图手动设置每个节点的节点的x和y属性,但是如果它受到力的影响,则链接继续浮动到节点所在的位置.

显然,我对这应该如何运作有一个基本的误解.如何在一个位置修复节点,同时保持链接并仍然允许它们可拖动?

解决方法:

将所需节点上的d.fixed设置为true,并将d.x和d.y初始化为所需位置.这些节点仍然是模拟的一部分,您可以使用正常的显示代码(例如,设置变换属性);但是,因为它们被标记为固定,所以它们只能通过拖动而不是通过模拟来移动.

有关更多详细信息,请参阅强制布局文档(v3 docs,current docs),另请参阅根节点在this example中的定位方式.

标签:javascript,d3-js,data-visualization,force-layout,d3-force-directed
来源: https://codeday.me/bug/20190916/1807642.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有