D3js forced directed graph animation and reload issue - d3.js

Question

Below code generates a force directed graph but there are couple of problems.
Like how do I control the opening animation speed
How do I change the drag speed
And major problem every time I try to drag some element it reloads automatically.
I not sure what am I doing wrong.
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

I don't understand why you have two tick functions.
How do I change the drag speed
And major problem every time I try to drag some element it reloads automatically.
Just have a single tick function like this:
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 your case you have two tick functions, both have a very different logic.
3) Like how do I control the opening animation speed
You have specified the node as fixed with x and y
Like: {"name": "You", "val": "You", "x": width * 0.50, "y": height * 0.5, "fixed": true}
In this case the force layout does not calculate the x and y since you have said its a fixed node which means it cannot be moved via force layout.
In case you want the layout to have animation on load to calculate its own place read this awesome tutorial
working code here