Почему обновление ForceRadial не устанавливает радиус, как ожидалось? - PullRequest
Новая
       26

Почему обновление ForceRadial не устанавливает радиус, как ожидалось?

0 голосов
/ 14 мая 2019

Я пытаюсь сделать простую анимированную визуализацию, вокруг которой вращаются три кольца точек. Среднее кольцо точек должно вращаться на радиусе, который перемещается между внутренним и внешним кольцом. 

  var nodes = [].concat(
 d3.range(80).map(function() { return {type: "a", phi0: 90, speed: 5, force:100}; }),
 d3.range(160).map(function() { return {type: "b", phi0:190, speed: 10, force: 200}; }),
 d3.range(240).map(function() { return {type: "c", phi0:290, speed: 15, force: 300}; })
);
var t0 = Date.now();

var svg = d3.select("svg");
var node = d3.select("svg")
.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
  .attr("r", 2.5)
  .attr("fill", function(d,i) {
    if (i == 1) {
     return "pink" 
    } else {
      return d.type === "a" ? "brown" : d.type == "b" ? "steelblue" : "gainsboro"; 
    }  
})

    var sim = d3.forceSimulation(nodes)
var forcecollide = sim.force("charge", d3.forceCollide().radius(5))
sim.on("tick", ticked);

function ticked() {
  node
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

hitmax = false;
hitmin = false;
function console(text){
  svg.selectAll("text").remove();
  svg.append("text").text(text);
}

  d3.timer(function() {
    var delta = (Date.now() - t0);

    nodes.forEach(function(d){

      if (d.type == "b" && d.force > 300) {
        hitmax = true;
        hitmin = false;
      } else if (d.type == "b" && d.force < 100) {
        hitmin = true;
        hitmax = false;
      }

      if (d.type == "b" && hitmax == true) {
        d.force = d.force - 1;
      } else if (d.type == "b" && hitmin == true) {
        d.force = d.force + 1;
      } else if(d.type == "b"){
        d.force = d.force + 1;
      }

      if (d.type =="b") {
        console(d.force + " hitmax:" + hitmax + " hitmin:" + hitmin)
      }

      sim.force("r", d3.forceRadial(function(d) { 
            return d.force;
      }))

    })

    svg.selectAll("circle").filter(function(d,i) { return d.type === "a";}).attr("transform", function(d) {
      return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
    });
    svg.selectAll("circle").filter(function(d,i) { return d.type === "b";}).attr("transform", function(d) {
      return "rotate("+ d.phi0 + delta * d.speed/200 + ")";
    });
    svg.selectAll("circle").filter(function(d,i) { return d.type === "c";}).attr("transform", function(d) {
      return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
    });
  });

JS Fiddle здесь: http://jsfiddle.net/_shimizu/Q5Jag/1/

Вместо того, чтобы орбита среднего кольца двигалась между внутренним и внешним кольцом, она медленно растет, немного сжимается, затем перестает изменяться. Я сделал свою визуализацию распечатывать переменные для отладки.

Любые советы о том, как заставить это работать, или лучшие рекомендации d3.

Я понимаю, что могу делать это совершенно неправильно. Спасибо.

...