javascript - 如何使用新数据顺利更新 D3 v4 力图

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

全新节点的入口看起来“跳跃”，原因很简单:当模拟开始时，该节点首先出现在左上角(0,0在 SVG 坐标系中)。

这里有不同的解决方案，具体取决于“顺利”的定义。我认为使其更平滑的最明显方法是将节点的初始位置设置为 SVG 的中心。这样，新节点就不会移动那么多到它的最终位置。

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

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

这里是你的代码有那个变化:

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

svg {
  border: 1px black solid
}

<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>