在d3 v4中差异力“中心”之间的过渡

Question

当我调整窗口大小时，我会启动一个'resize'事件，它将执行以下操作：

var width = +container.clientWidth;
var height = +container.clientHeight;
simulation.force('center', d3.forceCenter(width / 2, height / 2));
simulation.alphaTarget(0.3).restart();

将我的节点链接图集中到画布的中间。这样可以正常工作，但我没有向中心过渡，而是立即跳转。

我想有一个动画，如在这个例子中看到：https://bl.ocks.org/mbostock/raw/3355967/

但是，在d3 v4中，我不知道如何实现这种转变。我是否必须使用不同的力量，还是可以强制执行“过渡”？我必须在哪里申报？

示例：https://jsfiddle.net/n4m1r8nb/157/（它位于开头的左上角，当你调整大小时，它会'跳到'中心'）

看来这已经在d3 v3中完成了：

force.size([width, height]).resume();

但是，此方法在v4中不再可用，并替换为forceCenter（或forceX，forceY）。

Answer 1

你可以通过设置transition来做到这一点：

var nodes = [{
  "id": 1,
  "name": "server 1"
}, {
  "id": 2,
  "name": "server 2"
}, {
  "id": 3,
  "name": "server 3"
}, {
  "id": 4,
  "name": "server 4"
}, {
  "id": 5,
  "name": "server 5"
}, {
  "id": 6,
  "name": "server 6"
}, {
  "id": 7,
  "name": "server 7"
}, {
  "id": 8,
  "name": "server 8"
}, {
  "id": 9,
  "name": "server 9"
}]

var links = [{
  source: 1,
  target: 2
}, {
  source: 1,
  target: 3
}, {
  source: 1,
  target: 4
}, {
  source: 2,
  target: 5
}, {
  source: 2,
  target: 6
}, {
  source: 3,
  target: 7
}, {
  source: 5,
  target: 8
}, {
  source: 6,
  target: 9
}, ]

var index = 10;
var svg = d3.select("svg"),
  width = document.getElementById('container').clientWidth,
  height = document.getElementById('container').clientHeight,
  node,
  link;

d3.select(window).on('resize', function() {
  var w = document.getElementById('container').clientWidth;
  var h = document.getElementById('container').clientHeight;

  d3.select({}).transition().delay(500)
    .tween("center.move", function() {
        var i = d3.interpolateArray([width/2, height/2],[w/2,h/2]);
        width = w; height = h;
      return function(t) {
      	var c = i(t);
        simulation.force('center', d3.forceCenter(c[0], c[1]));
        simulation.alphaTarget(0.3).restart();
      };
    });  
});


var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) {
    return d.id;
  }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

update();

function update() {
  link = svg.selectAll(".link")
    .data(links, function(d) {
      return d.target.id;
    })

  link = link.enter()
    .append("line")
    .attr("class", "link");

  node = svg.selectAll(".node")
    .data(nodes, function(d) {
      return d.id;
    })

  node = node.enter()
    .append("g")
    .attr("class", "node");

  node.append("circle")
    .attr("r", 2.5)

  simulation
    .nodes(nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(links);
}

function ticked() {
  link
    .attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });

  node
    .attr("transform", function(d) {
      return "translate(" + d.x + ", " + d.y + ")";
    });
}

.link {
  stroke: #aaa;
}

svg {
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
}

.node {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

<script src="http://d3js.org/d3.v4.js"></script>
<div id="container">
  <svg></svg>
</div>

Answer 2

要立即过渡（并且比补间更容易），只需删除指示中心的当前力量，然后创建一个新力量：

EG

d3.select(window).on('resize', function() {
    let w = document.getElementById('container').clientWidth;
    let  h = document.getElementById('container').clientHeight;

    simulation.force("center", null)
        simulation.force('center', d3.forceCenter(w / 2, h / 2));
});

如果您正在寻找平滑过渡（与补间一样），只需使用.force('x', ...)和.force('y', ...)而不是上面的.force('center', ...)来居中我们的节点。