D3js gezwungen gerichtete Grafik Animation und neu laden Problem

Question

Unter Code erzeugt eine Kraft gerichtete Grafik, aber es gibt einige Probleme.

1. Wie, wie steuere ich die Öffnung Animationsgeschwindigkeit
2. Wie ändere ich die Drag Geschwindigkeit
3. Und großes Problem jedes Mal, wenn ich versuche, ein Element zu ziehen es automatisch neu geladen.

Ich bin mir nicht sicher, was ich falsch mache.

var width = $(window).width(), 
     height = 700; 

var force = d3.layout.force() 
     .size([width, height]) 
     .on("tick", tick2); 




var svg = d3.select("body .banner").append("svg") 
     .attr("width", width) 
     .attr("height", height); 
//.on("click", explicitlyPosition); 

var link = svg.selectAll(".link"), 
     node = svg.selectAll(".node"); 

function tick2() { 
    link 
      .attr("x1", function (d) { 
       return width * 0.5; 
      }) 
      .attr("y1", function (d) { 
       return height * 0.5; 
      }) 
      .attr("x2", function (d) { 
       return width * 0.5; 
      }) 
      .attr("y2", function (d) { 
       return height * 0.5; 
      }); 

    d3.selectAll("circle") 
      .attr("cx", function (d) { 
       return width * 0.5; 
      }) 
      .attr("cy", function (d) { 
       return height * 0.5; 
      }); 

    d3.selectAll("text") 
      .attr("x", function (d) { 
       return width * 0.5; 
      }) 
      .attr("y", function (d) { 
       return height * 0.5; 
      }); 
    tick(); 
} 
function tick() { 
    link.transition() 
      .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; 
      }); 

    d3.selectAll("circle").transition() 
      .attr("cx", function (d) { 
       return d.x; 
      }) 
      .attr("cy", function (d) { 
       return d.y; 
      }); 

    d3.selectAll("text").transition() 
      .attr("x", function (d) { 
       return d.x; 
      }) 
      .attr("y", function (d) { 
       return d.y; 
      }); 
} 

var graph = { 
    "nodes": [ 
     {"name": "You", "val": "You", "x": width * 0.50, "y": height * 0.5, "fixed": false}, 
     {"name": "SaaS", "val": 768, "x": width * 0.40, "y": height * 0.14, "fixed": true}, 
     {"name": "Education", "val": 1021, "x": width * 0.65, "y": height * 0.10, "fixed": true}, 
     {"name": "E-Commerce", "val": 1345, "x": width * 0.75, "y": height * 0.35, "fixed": true}, 
     {"name": "Food Tech", "val": 512, "x": width * 0.70, "y": height * 0.72, "fixed": true}, 
     {"name": "Healthcare", "val": 246, "x": width * 0.57, "y": height * 0.70, "fixed": true}, 
     {"name": "Fashion Industry", "val": 657, "x": width * 0.30, "y": height * 0.80, "fixed": true}, 
     {"name": "Hardware", "val": 145, "x": width * 0.30, "y": height * 0.65, "fixed": true}, 
     {"name": "Fintech", "val": 1160, "x": width * 0.25, "y": height * 0.18, "fixed": true}, 
     {"name": "Series A", "val": 392, "x": width * 0.85, "y": height * 0.13, "fixed": true}, 
     {"name": "Series B", "val": 873, "x": width * 0.80, "y": height * 0.60, "fixed": true}, 
     {"name": "2014", "val": 592, "x": width * 0.125, "y": height * 0.25, "fixed": true}, 
     {"name": "2015", "val": 630, "x": width * 0.19, "y": height * 0.45, "fixed": true} 
    ], 
    "links": [ 
     {"source": 0, "target": 1}, 
     {"source": 0, "target": 2}, 
     {"source": 0, "target": 3}, 
     {"source": 3, "target": 9}, 
     {"source": 3, "target": 10}, 
     {"source": 0, "target": 4}, 
     {"source": 0, "target": 5}, 
     {"source": 0, "target": 6}, 
     {"source": 0, "target": 7}, 
     {"source": 0, "target": 8}, 
     {"source": 8, "target": 11}, 
     {"source": 8, "target": 12} 
    ] 
}; 




link = link.data(graph.links) 
     .enter().append("line") 
     .attr("class", "link"); 

node = node.data(graph.nodes) 
     .enter().append("g") 
     .call(force.drag); 

node.append("circle") 
     .attr("class", "node") 
     .attr("r", function (d) { 
      you_val = (d.val === "You") ? 1500 : d.val; 
      return ((you_val)/30) < 15 ? 15 : ((you_val)/30); 
     }); 

node.append("text") 
     .attr("x", 0) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "middle") 
     .attr("fill", "#9a9a9a") 
     .attr("font-size", "12px") 
     .attr("font-weight", "600") 
     .text(function (d) { 
      return d.val; 
     }); 

node.append("text") 
     .attr("x", 0) 
     .attr("dy", function (d) { 
      you_val = (d.val === "You") ? 1500 : d.val; 
      var rad = ((you_val)/30) < 15 ? 15 : ((you_val)/30); 
      return (rad + 15) + "px"; 
     }) 
     .attr("text-anchor", "middle") 
     .attr("fill", "#9a9a9a") 
     .attr("font-size", "12px") 
     .text(function (d) { 
      return d.name; 
     }); 

force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

Answer 1

Ich verstehe nicht, warum Sie zwei Tick-Funktionen haben.

1. Wie ändere ich die Drag Geschwindigkeit
2. Und großes Problem jedes Mal, wenn ich versuche, ein Element zu ziehen es automatisch neu geladen.

haben nur eine einzige Zecke Funktion wie folgt aus:

function tick2() { 
    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; 
      }); 

    d3.selectAll("circle") 
      .attr("cx", function (d) { 
       return d.x; 
      }) 
      .attr("cy", function (d) { 
       return d.y; 
      }); 

    d3.selectAll("text") 
      .attr("x", function (d) { 
       return d.x; 
      }) 
      .attr("y", function (d) { 
       return d.y; 
      }); 
} 

In Ihrem Fall Sie zwei tick Funktionen haben, die beide eine ganz andere Logik.

3) Wie, wie steuere ich die Öffnung Animationsgeschwindigkeit

Sie den Knoten angegeben haben, als mit x und y festgelegt

Like: {"name": "You", "val": "You", "x": width * 0.50, "y": height * 0.5, "fixed": true}

In diesem Fall wird die Kraft Layout nicht berechnen ist das x und y, da du einen festen Knoten angegeben hast, was bedeutet, dass es nicht über das Force-Layout bewegt werden kann.

Falls Sie die Layout-Animation auf Last zu haben, seinen eigenen Platz lesen dieses ehrfürchtige tutorial

Arbeits Code here