javascript - 仅在部分节点 D3 上使用径向力

标签 javascript d3.js

我有这个fiddle

我对节点进行了颜色编码,我希望这些节点不受径向力的影响。我认为它可能是这样工作的:

 function radial() {
      simulation
        .force("charge", d3.forceCollide().radius(10))
        .force("r", d3.forceRadial(function(d) {
          if(d.id == 3){
             return null //dont effect these nodes
          }else
          if (d.id < 5) {
            return 100;
          } else {
            return 200;
          }
        }, width / 2, height / 2).strength(1))
      simulation.alpha(1).restart()    
    }

但是,这似乎只是将它们放在中间,而没有跳过它们。是否有另一种方法可以过滤掉这些节点,以便径向力不会移动它们?

最佳答案

当您在力访问器上返回 null 时,您实际上是将这些节点的圆半径设置为 (0,0)。根据文档:

d3.forceRadial()

Creates a new positioning force towards a circle of the specified radius centered at ⟨x,y⟩. If x and y are not specified, they default to ⟨0,0⟩.

您想要做的是将相应节点的力强度设置为 0。您还需要关闭在初始化模拟时设置的所有其他力量:

function radial() {
  simulation
    .force("charge", d3.forceCollide().radius(10))
    .force("r", d3.forceRadial(function(d) {
        return d.id < 5 ? 100 : 200;
      }, width / 2, height / 2).strength(function(d) {
        // set radial force to 0 if it has the id we're looking for
        if(d.id == 3) return 0
        // otherwise keep the strength at 1
        else return 1
      })
    )
    // turning off previously set forces
    .force('link', null)
    .force('x', null)
    .force('y', null)

关于javascript - 仅在部分节点 D3 上使用径向力,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53010307/

相关文章:

javascript - 我们可以在json数据文件中添加图像并使用D3.js在页面上调用它吗

javascript - 多行系列中鼠标悬停的问题

javascript - 在 Angular 中使用 'eval' 捕获未定义的 TypeError?

php - 使用 Ctrl+Click 选择多个图像并使用 PHP 上传

javascript - 不循环获取对象值

javascript - 通过对象id获取对象属性

javascript - 尝试使用 d3.csv 时出现错误 "data not defined"?

javascript - 简单的 Knockout.JS 数据绑定(bind)

javascript - 具有已知偏移量且没有夏令时的已知位置的时间

javascript - Fisheye Distortion 插件的奇怪行为