過渡

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

但是，此方法在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) { 
 
     \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>