1

那里的专家，我有一个小问题，我似乎无法自己弄清楚。

我有一些显示为图表的数据。我得到一个包含数据的文件并将所需的节点提取到我称为“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');
4

0 回答 0