Question

那里的专家，我有一点点探索，我似乎无法自己解决。

我有一些数据显示为图表。我得到一个包含数据的文件，并将所需的节点提取到一个名为'reqNodes'的数组中。应该是所有显示数据的“中心”的主节点是固定的，其他主节点具有应用于它们的力布局。我现在所挣扎的是：如果用户点击任何其他节点，这个节点就会成为图表的中心。他是固定的，旧的不固定。到目前为止工作。但我希望新的中心节点转换到屏幕的中心。目前所有节点总是停留在我点击它们的位置，因此如果我没有手动将其推回到中心，图表会随着我点击的每个新节点移动。

如果你有任何好主意帮助我，我会很高兴的！

greetz，戴夫

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

D3 - 重新组合时使用Transition

0 个答案: