Question

我正在尝试制作一个简单的动画可视化，其中有三个环绕的圆点环。点的中间环应以在内环和外环之间移动的半径旋转。

  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小提琴在这里：http://jsfiddle.net/_shimizu/Q5Jag/1/

它不是在内圈和外圈之间移动，而是缓慢增长，略微收缩然后停止变化。为了调试，我已经将可视化文件打印出来了。

任何有关如何使该方法有效或d3最佳实践的建议。

我知道我做的这件事可能是完全错误的。谢谢。

为什么更新forceRadial不能按预期设置半径？

0 个答案: