Question

我正在寻找一种方法，将新节点引入来自全新数据（例如来自数据流）的强制定向有向图。

在mbostock的示例中（this或this），节点能够平滑地进入和退出，因为在初始设置中，每个节点都会被渲染。

但是，如果引入了全新的数据点，则图表将再次从头开始呈现。有没有办法让全新的节点顺利过渡到图表中？

对于我的意思，请参阅此codepen（这是对第二个示例的直接修改）;进入和退出现有节点是好的，但是当一个全新的节点进入时的过渡很快。

  //smooth update
  nodes = [a, b];
  links = [l_ab];
  restart();

  //not as smooth
  var d = {id: id++};
  nodes = [a, b, c, d];
    links = [l_ab, l_bc, l_ca, {
      source: a,
      target: d
    }];
  restart();

Answer 1

全新节点的入口似乎是＆＃34; jumpy＆＃34; ，原因很简单：当模拟开始时，该节点首先出现在顶部-left corner（SVG坐标系中的0,0）。

这里有不同的解决方案，具体取决于＆＃34; smooth＆＃34; 的定义。我认为使其成为 smoothier 的最明显的方法是将节点的初始位置设置为SVG的中心。这样，新节点就不会那么多地移动到最终位置。

我们可以设置新节点的x和y属性：

var d = {id: id++, x: width/2, y: height/2};

以下是您更改的代码：

＆＃13;

var svg = d3.select("svg"),
  width = 250
height = 250
color = d3.scaleOrdinal(d3.schemeCategory10);

var a = {
    id: "a"
  },
  b = {
    id: "b"
  },
  c = {
    id: "c"
  },
  nodes = [a, b, c],
  l_ab = {
    source: a,
    target: b
  }
l_bc = {
    source: b,
    target: c
  },
  l_ca = {
    source: c,
    target: a
  }
links = [l_ab, l_bc, l_ca];

var id = 0;

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody())
  .force('link', d3.forceLink())
  .force('center', d3.forceCenter(width / 2, height / 2))
  .alphaTarget(1)
  .on("tick", ticked)
  .stop()

var g = svg.append("g")
link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
  node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

restart();

function restart() {

  // Apply the general update pattern to the nodes.
  node = node.data(nodes, function(d) {
    return d.id;
  });

  node.exit().transition()
    .attr("r", 0)
    .remove();

  node = node.enter().append("circle")
    .attr("fill", function(d) {
      return color(d.id);
    })
    .call(function(node) {
      node.transition().attr("r", 8);
    })
    .merge(node);

  // Apply the general update pattern to the links.
  link = link.data(links, function(d) {
    return d.source.id + "-" + d.target.id;
  });

  // Keep the exiting links connected to the moving remaining nodes.
  link.exit().transition()
    .attr("stroke-opacity", 0)
    .attrTween("x1", function(d) {
      return function() {
        return d.source.x;
      };
    })
    .attrTween("x2", function(d) {
      return function() {
        return d.target.x;
      };
    })
    .attrTween("y1", function(d) {
      return function() {
        return d.source.y;
      };
    })
    .attrTween("y2", function(d) {
      return function() {
        return d.target.y;
      };
    })
    .remove();

  link = link.enter().append("line")
    .call(function(link) {
      link.transition().attr("stroke-opacity", 1);
    })
    .merge(link);

  // Update and restart the simulation.
  simulation.nodes(nodes);
  simulation.force("link").links(links);
  simulation.alpha(1).restart();
}

function ticked() {
  node.attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    })

  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;
    });
}

restart();

document.getElementById('btnRenderExisting3Node').addEventListener('click', function() {
  nodes = [a, b, c];
  links = [l_ab, l_bc, l_ca];
  restart();
});

document.getElementById('btnRenderExisting2Node').addEventListener('click', function() {
  nodes = [a, b];
  links = [l_ab];
  restart();
});

document.getElementById('btnRenderNewNode').addEventListener('click', function() {
  var d = {
    id: id++,
    x: width / 2,
    y: height / 2
  };
  nodes = [a, b, c, d];
  links = [l_ab, l_bc, l_ca, {
    source: a,
    target: d
  }];
  restart();
});

＆＃13;

svg {
  border: 1px black solid
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div>
  <button id='btnRenderExisting2Node'>Render 2 existing nodes</button>
  <button id='btnRenderExisting3Node'>Render 3 existing nodes</button>
  <button id='btnRenderNewNode'>Render 3 existing nodes and 1 brand new node</button>
</div>
<svg width="250" height="250"></svg>
</div>

＆＃13;

Answer 2

我发布了bl.ocks，其中我在添加/删除数据时在图形的两个连续布局之间进行平滑过渡。代替使用刻度函数在力仿真的每次迭代时更新视图，而是在Web Worker中计算新的布局，并在仿真收敛后使用d3过渡机制重新定位节点/链接。结果使您可以轻松跟踪节点的位置。

如何使用新数据平滑更新D3 v4力图

2 个答案: