Перехода между разностью силой «центром» в d3 v4

Question

Когда я изменить размер моего окна, я начинаю «изменения размера» событие, которое будет делать:

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

Однако этот метод больше не доступен в версии 4 и заменен на 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) { 
 
     \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>