使用新数据重新渲染 D3 强制定向布局

Posted 2023-02-22

【中文标题】使用新数据重新渲染 D3 强制定向布局

【英文标题】：Rerender D3 Force directed Layout with new data

【发布时间】：2016-03-11 21:05:05

【问题描述】：

我正在使用 d3 force 有向图布局来显示一些数据。当我双击节点旁边的名称时，我想用新数据重新渲染图形。我找到了一个simular question on ***，但它并没有真正适合我。那里的关键似乎是我正在调用的force.start(); 方法。这是我到目前为止编码的内容。它已缩短到绝对最小值。

var height =  600;
var width = 800;
var color = d3.scale.category20();
var svg = d3.select('body').append('svg').attr('width', width).attr('height',
        height).attr("pointer-events", "all").append("g").append("g");
svg.append("rect").attr("class", "overlay").attr("width", width).attr("height", height);

function draw(json) 
    var force = self.force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .gravity(.05)
        .distance(150)
        .charge(-100)
        .size([width, height])
        .start();

    var link = svg.selectAll(".link").data(json.links).enter().append("line")
            .attr("class", "link").style("stroke-width", 1);

    var gnodes = svg.selectAll('g.gnode').data(json.nodes).enter().append('g').classed('gnode', true);


    var node = gnodes.append("circle").attr("class", "node").attr("r", 5)
            .style("fill", function(d) 
                return color(d.group);
            );

    var labels = gnodes.append("text").text(function(d) 
        return d.name;
    ).attr("dx", 5).attr("dy", ".35em").on('dblclick', function(d)
        redraw();
    );
    gnodes.selectAll("circle.node").on("click", function() 
        d3.select(this);
    );
    force.on("tick", tick);

    function tick() 
      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; );
      gnodes.attr("transform", function(d)  return "translate(" + d.x + "," + d.y + ")"; );
    
force.start();
;


function invoke()
    inputString = 
            "nodes":[
                     "concept":"man","name":"John","id":0,"shortname":"","group":2,
                     "concept":"woman","name":"Mia","id":1,"shortname":"","group":6,
                     "concept":"child","name":"Harry","id":2,"shortname":"","group":7,
                     "concept":"child","name":"Sally","id":3,"shortname":"","group":7,
                     "concept":"old women","name":"Judith","id":4,"shortname":"","group":8,
                     "concept":"old man","name":"Lionel","id":5,"shortname":"","group":7
                  ],
                  "links":[
                     "source":0,"target":1,"relation":"married",
                     "source":0,"target":2,"relation":"father",
                     "source":1,"target":2,"relation":"mother",
                     "source":0,"target":3,"relation":"father",
                     "source":1,"target":3,"relation":"mother",
                     "source":5,"target":2,"relation":"grandfather",
                     "source":5,"target":3,"relation":"grandfather",
                     "source":4,"target":2,"relation":"grandmother",
                     "source":4,"target":3,"relation":"grandmother",
                     "source":5,"target":1,"relation":"father",
                     "source":4,"target":1,"relation":"mother"
                  ]
             ;
    draw(inputString);


function redraw()
    inputString = 
            "nodes":[
                     "concept":"man","name":"Alan","id":0,"shortname":"","group":2,
                     "concept":"woman","name":"Judith","id":1,"shortname":"","group":6,
                     "concept":"child","name":"Jack","id":2,"shortname":"","group":7,
                     "concept":"child","name":"Rosana","id":3,"shortname":"","group":7,
                     "concept":"old women","name":"Evelyn","id":4,"shortname":"","group":8,
                     "concept":"old man","name":"Charlie","id":5,"shortname":"","group":7
                  ],
                  "links":[
                     "source":0,"target":1,"relation":"married",
                     "source":0,"target":2,"relation":"father",
                     "source":1,"target":2,"relation":"mother",
                     "source":0,"target":3,"relation":"father",
                     "source":1,"target":3,"relation":"mother",
                     "source":5,"target":2,"relation":"grandfather",
                     "source":5,"target":3,"relation":"grandfather",
                     "source":4,"target":2,"relation":"grandmother",
                     "source":4,"target":3,"relation":"grandmother",
                     "source":5,"target":1,"relation":"father",
                     "source":4,"target":1,"relation":"mother"
                  ]
             ;
    draw(inputString);


var inputString = undefined;

invoke();

调用双击行为的部分在这里：

var labels = gnodes.append("text").text(function(d) 
        return d.name;
    ).attr("dx", 5).attr("dy", ".35em").on('dblclick', function(d)
        redraw();
);

redraw(); 有新数据，应该只调用我的函数来再次绘制图形。对我来说，双击一个节点似乎只能工作一次。甚至他们也绘制了旧数据。我准备了一个fiddle demo，包含我目前拥有的一切。 我在重新渲染图表时做错了什么？

【参考方案1】：

在绘制函数中渲染之前，您需要删除节点和链接。

function draw(json) 
  svg.selectAll(".link").remove();//add this to remove the links
  svg.selectAll(".gnode").remove();//add this to remove the nodes
...your old code.

工作代码here.

【讨论】：

谢谢，有时解决方案竟然如此简单，令人惊讶：)