CODEWITHSUNDEEP
javascriptd3.js
thatOneGuy
thatOneGuy

Reputation: 10612

Only use radial force on some of the nodes D3

I have this fiddle

I have colour coded the nodes and I wish for these nodes not to be effected by the radial force. Here is how I thought it may work : 

 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()    
    }

However, this seems that it just places them in the center and doesn't skip them. Is there another way to filter out these nodes so that the radial force doesn't move them?

Upvotes: 0

Views: 612

Answers (1)

Tyler Wolf
Tyler Wolf

Reputation: 106

When you return null on the force accessor, you're actually setting the radius of the circle for those nodes to (0,0). Per the docs:

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⟩.

What you want to do, instead, is set the strength of the force to 0 for the corresponding nodes. You'll also want to turn off all of the other forces that you had set up when you initialized the simulation:

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)

Upvotes: 2

Related Questions