「 D3: Force Directed Graphs FDG でノードの円の遅い遷移を作成する方法は?」という以前の投稿で、 D3で単一の要素 (「円のみ」の半径など) を遷移する方法について素晴らしい回答を得ました。
私のフォローアップの質問は、「複数の D3 属性」を同時に移行する方法についてです...
念のため、ここでは D3 で生成されたラジオ ボタンを使用して、FDG レイアウトのノードのサイズを (マウス クリックで) デフォルト サイズからスケーリングされた大きさに切り替えています。ノード クラスタ ダイアグラムの左上にラジオ ボタンがあります( http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html ) 。
ノードの円をデフォルトの数値とスケーリングされた大きさ (現在は遷移を使用) の間で切り替えるコードは次のようになります...
var densityControlClick = function() {
var thisObject = d3.select(this);
var typeValue = thisObject.attr("density_type");
var oppositeTypeValue = (function() {
if(typeValue=="On") {
return "Off";
} else {
return "On";
}
})();
var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
var selectedBullet = d3.selectAll(densityBulletSelector);
selectedBullet.style("fill", "Black")
var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
selectedOppositeBullet.style("fill", "White")
if(typeValue=="On") {
var selectedNodeCircles = d3.selectAll("#NODE");
selectedNodeCircles.transition().duration(500).attr("r", function(d){ return rRange(d.rSize); });
}
else {
var selectedNodeCircles = d3.selectAll("#NODE"); selectedNodeCircles.transition().duration(500).attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
}
}
すべてがうまく機能し、ラジオ ボタンを選択すると、ノードの遷移が遅くなることがわかります。ただし、D3 の動的な性質を誇示するために、半径やエッジの長さなどの複数の要素を同時に移行する方法と、その背後にある理論を学びたいと思います。
私の質問は、円の半径を正常に移行できることを考えると、「アルファ」、「摩擦」などの属性に基づいて、エッジの長さなどの他の要素をどのように移行するか、そして...背後にある理論は何ですか?複数の要素を遷移させる (つまり、コードは英語で何を意味するのか)? D3 API は、複数の属性を同時に移行する背後にある理論を明確に理解していないようです。