javascript - D3 - 再グループ化するときにトランジションを使用

Question

そこの専門家、私は自分で理解できないように見える小さな問題を抱えています。

グラフとして表示されるデータがいくつかあります。データを含むファイルを取得し、必要なノードを「reqNodes」という配列に抽出します。表示されるすべてのデータの「中心」となるメイン ノードは固定され、その他のノードには強制レイアウトが適用されます。現時点で苦労していること: ユーザーが他のノードをクリックすると、このノードがグラフの中心になります。彼は固定されていますが、古いものは固定されていません。これまでの作業。しかし、新しいセンターノードが画面の中央に遷移することを望みます。現時点では、すべてのノードは常にクリックした場所にとどまるため、手動で中央に戻さないと、新しいノードをクリックするたびにグラフが移動します。

私を助ける素晴らしいアイデアがあれば、私はとてもうれしいです!

挨拶、デイブ

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; });
     });

大事なことを忘れていないことを願っています。何か見逃した場合は、お知らせください。

ノート：

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