D3 - use Transition when regrouping

Question

experts out there, i've got a little probem I seem not to be able to figure out by myself.

I have some data that are displayed as a graph. I get a file with the data and extract the required nodes to an array i called 'reqNodes'. The main-node that is supposed to be 'the center' of all the displayed data is fixed, the others have a force layout applied to them. What I struggle with at the moment: if the user clicks on any other node, this one becomes the center of the graph. he is fixed, the old one unfixed. Working so far. But I would like the new center node to transition to the center of the screen. At the moment all the nodes always stay where I clicked them, and so the graph moves with every new node i click, if i don't push it back to the center manually.

If you have any great idea to help me out, I'd be very glad!

greetz, Dave

function update() {
   group.selectAll(".link").remove();
   group.selectAll(".node").remove();
   for(var count = 0; count < reqNodes.length; count++){
        reqNodes[count].fixed = false;
   }
   var fixedNode = reqNodes[getNodesFinalIndex(mittelpunkt)];
   fixedNode.fixed = true;

   fixedNode.px = width/2;
   fixedNode.py = height/2;

   force
        .nodes(reqNodes)
        .links(reqLinks)
        .start();

    link = group.selectAll(".link")
            .data(reqLinks);

    link.enter().append("line")
        .attr("class", "link")
        .style("stroke", "#000")
        .style("stroke-width", function(d) { return Math.sqrt(d.value)*1.2; });

    node = group.selectAll(".node")
            .data(reqNodes);

    node.enter().append("circle")
        .attr("class", "node")
        .attr("r", 7)
        .style("stroke", "black")
        .style("fill", function(d) { return colorArray[d.group]; })
        .call(force.drag);

    for(var oo = 0; oo < group.selectAll(".node").length; oo++){
                if(group.selectAll(".node")[oo].name = mittelpunkt){
                    console.log("node[0][oo]: ");
                    console.log(node[0][oo]);
                    node[0][oo].style.stroke = "red";
                    node[0][oo].style.strokeWidth = 4;  

                }
    }   

    node.append("title")
        .text(function(d) { return d.name; });

    node.on("click", function(d) {
        mittelpunkt = d.name;
            paintIt();
         });

    node.append("text").attr("dx", 12).attr("dy", ".35em").attr("fill", "#aa0101").text(function(d) {
                return d.name
            });

   force.on("tick", function() {
                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; });

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

Hope i didn't forget something essential. If you miss something, just let me know!

Note:

var group = d3.select("#chart").append("svg").attr("width", width).attr("height", height).attr("id", 'networkBox').append('g');