2
私が取り組んでいるd3プロジェクトでアニメーションの量を減らそうとしています。d3ライブラリのアニメーション機能を最小化/制限します
これまでアニメーションの力を抑えるために、さまざまな組み込み関数を使用しようとしました。たとえば、alpha(.1) gravity(1) charge(-1000)などですが、これらの機能の中には大きな違いがないようです。
最終結果： アニメーションの開始時に巨大なバウンスを取り除きたいと思います。これは可能ですか？ここで
は私の完全なjsの関数である：私は私が投稿する管理SO質問hereと私の元のコードをマージしようとしたとhere
jsbinリンクjsfiddle
へ
// return data for relationships between database tables
returnTableRelationshipData = function(){
data = {
"nodes":[
{
"platform":"Source DB",
"description":"RELATIONSHIPS BETWEEN BUSINESS REFERENCES",
"ingested":"No",
"tableId":"RELAC_REFER",
"level1":"DAEG",
"level2":"url",
"nodeId":0
},
{
"platform":"Source DB",
// see jsfiddle for full data
]
};
//find the node index
function find(f){
var i = -1
data.nodes.forEach(function(node, index){
if(node.nodeId == f)
i = index;
});
return i;
}
//set the source and target index
data.links.forEach(function(d){
d.source = find(d.source);
d.target = find(d.target);
})
// used to store the number of links between two nodes.
var mLinkNum = {};
// sort links first
sortLinks();
// set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node
setLinkIndexAndNum();
// check that we don't have empty or null values
checkDataNotEmpty();
var w = 600,
h = 500;
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.alpha(.1)
.gravity(1)
//.distance(150)
.charge(-1000)
.size([w, h])
.start();
var svg = d3.select(".graphContainer").append("svg:svg")
.attr("width", w)
.attr("height", h);
var path = svg.append("svg:g")
.selectAll("path")
.data(force.links())
.enter().append("line")
.attr("class", "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;
});
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
var circle = svg.append("svg:g")
.selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.call(node_drag);
var text = svg.append("svg:g")
.selectAll("g")
.data(force.nodes())
.enter().append("svg:g");
text.append("svg:text")
.text(function(d){ return d.description; });
/*circle.on("mousedown", function(d) { d.fixed = true; });*/
force.on("tick", tick);
function tick() {
path.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;
});
circle.attr("transform", function(d){
return "translate(" + d.x + "," + d.y + ")";
});
text.attr("transform", function(d){
return "translate(" + d.x + "," + d.y + ")";
});
}
function dragstart(d, i) {
force.stop(); // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick();
}
function dragend(d, i) {
//nodes.fixed = true; // fix all nodes after single drag
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
tick();
force.resume();
}
// sort the links by source, then target
function sortLinks(){
if(data.links != null){
data.links.sort(function(a,b){
if(a.source > b.source){
return 1;
}else if(a.source < b.source){
return -1;
}else{
if(a.target > b.target){
return 1;
}if(a.target < b.target){
return -1;
}else{
return 0;
}
}
});
}
}
//any links with duplicate source and target get an incremented 'linknum'
function setLinkIndexAndNum(){
for(var i = 0; i < data.links.length; i++){
if(i != 0 &&
data.links[i].source == data.links[i-1].source &&
data.links[i].target == data.links[i-1].target){
data.links[i].linkindex = data.links[i-1].linkindex + 1;
}else{
data.links[i].linkindex = 1;
}// save the total number of links between two nodes
if(mLinkNum[data.links[i].target + "," + data.links[i].source] !== undefined){
mLinkNum[data.links[i].target + "," + data.links[i].source] = data.links[i].linkindex;
}else{
mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
}
}
}
function checkDataNotEmpty(){
data.links.forEach(function(link, index, list) {
if (typeof link.source === 'undefined') {
console.log('undefined link', data.nodes[link.source]);
}
if (typeof link.target === 'undefined') {
console.log('undefined source', data.nodes[link.target]);
}
});
}
}
returnTableRelationshipData();
リンク未使用のライブラリをpastebinにコピーし、jsfiddleにリンクしてください。ここではフルjsライブラリが参考になります：Unminified d3 Library v3
アニメーション機能は、ラインの周りに5807
var d3_ease_default = function() { return d3_identity; };
を開始しても、私はそれらの機能の多くをコメントアウトしようとしている、とアニメーションがそのまま実行するように見えるように見えます。
私はこれが最善の問題ではないことを認識していますが、誰かがこれを経験していると大変感謝しています。
さらに、固定ノードを使用するのはうれしいですが、フォースアニメーションが完了した後でしか修正できないと思います。
です。ありがとうございました。 – lharby