d3js v4：ノードにクリックを強制してトゥイーンのように見えるようにするにはどうすればよいですか？

Question

this codepen demoをご覧ください。私はsvgオブジェクトをクリックして、シミュレーションチックがインスタンス化されていることを確認してください。したがって、遷移が発生します。私は単純な関数を使用してそれを行う：

しかし、 "トゥイーン"が存在しないことをデモから見ることができます。私が提案しているトゥイーンの例を見るには、hereを参照してください！

どこが間違っていますか？ ticked()関数はノードがどこにあるか知っていますか？ノードの代わりにシミュレーションにポジションを指定する必要がありますか？

キーコード（上記のデモリンクに含まれる）：

var data = { 
    nodes:d3.range(0, range).map(function(d){ return {label: "l"+d ,r: config.radius,color: d3.scaleOrdinal(d3.schemeCategory10)}})  
} 
svg 
    .attr("width", config.canvas.width) 
    .attr("height", config.canvas.height) 
    .attr("id", "canvas") 
    .style("border", "1px solid black") 
    .attr("onclick", "transitionTo()"); 
} 

var simulation = d3.forceSimulation() 
    .force("collide",d3.forceCollide(function(d){return d.r + 1 }).iterations(15)) 
    .force("charge", d3.forceManyBody().strength(1)) 
    .force("center", d3.forceCenter(config.canvas.width/2, config.canvas.height/2)) 
    .force("y", d3.forceY(0)) 
    .force("x", d3.forceX(0)); 

var node = svg.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(data.nodes) 
    .enter().append("circle") 
    .attr("r", function(d){ return d.r }) 
    .attr('cx', function(d, i) { return i % 10 * (config.canvas.width - config.margin.x*2)/10 + config.radius + config.margin.x; }) 
    .attr('cy', function(d, i) {return (Math.floor(i/10) * (config.canvas.height - config.margin.y*2)/10) + config.margin.y + config.radius}); 

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

simulation 
    .nodes(data.nodes); 

function transitionTo() { 
    simulation 
    .on("tick", ticked); 
} 

私はD3 v4のためにある答えを好むが、任意のアイデアは非常に歓迎されるでしょう！このd3 noobのおかげで。

Answer 1

トゥイーンが見えない理由は、ソリューションが非常に迅速に収束しているということです。つまり、「チェックされた」関数の最初の反復では、xとyが最終的なソリューションに非常に近いと計算されます。彼らは最終的な位置を見つけると、シミュレーションの最後に点が少し光るのが分かります。

ノードが（d.xとd.yを介して）どこにあるか知っているので、シミュレーションの位置を指定する必要はありません。

ノードを初期位置から最終的なソリューションにアニメーション化するには、シミュレーション設定を効率の悪いものに調整する方法があります。

私はここでd3.transitionを使用してクリーンな解決策は（）は、おそらくありupdated codepen

だvelocityDecayを追加し、1

var simulation = d3.forceSimulation() 
    .velocityDecay(0.05) 
    .force("collide",d3.forceCollide(function(d){return d.r + 1 }).iterations(1)) 
    .force("charge", d3.forceManyBody().strength(1)) 
    .force("center", d3.forceCenter(config.canvas.width/2, config.canvas.height/2)) 
    .force("y", d3.forceY(0)) 
    .force("x", d3.forceX(0)); 

にforceCollideの反復を変更しました。