Как плавно обновить диаграмму сил D3 v4 новыми данными

1

Я ищу способ введения новых узлов в направленный направленный на усиление график, который исходит из совершенно новых данных (например, из потока данных).

В примерах mbostock (либо этого или этого) узлы могут плавно входить и выходить, потому что в начальной настройке каждый узел визуализируется.

Однако, если ввести новую точку данных, график снова отобразится с нуля. Есть ли способ заставить новый узел плавно перейти на график?

См. Этот 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();
  • 0
    Вы сказали: «В примерах mbostock узлы могут плавно входить и выходить, потому что при начальной настройке каждый узел визуализируется». , Не совсем, я изменил код Bostock так, чтобы в начальной настройке было только 2 узла, и он отлично работает, посмотрите: bl.ocks.org/anonymous/c404606105bf9c39b54c3558c412104d/…
  • 0
    Это действительно интересно; Я разобрал свой пример codepen, чтобы начать с 2, и получил переходный переход при переходе к 3: codepen.io/lionbark/pen/ZvJqzM Интересно, в чем разница?
Показать ещё 1 комментарий
Теги:
d3.js

2 ответа

3
Лучший ответ

Вход в новый узел кажется "прыгающим" по простой причине: когда начинается симуляция, этот узел сначала появляется в верхнем левом углу (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>
Поделиться
  • 0
    Спасибо за быстрый ответ; это была точная причина!
0

Я опубликовал bl.ocks, где я работал над плавными переходами между двумя последовательными макетами графика, когда данные добавляются/удаляются. Вместо того, чтобы использовать функцию галочки для обновления представления на каждой итерации силового моделирования, новый макет вычисляется в Web Worker, а узлы/ссылки переставляются с механизмом перехода d3 после слияния моделирования. Результат позволяет легко отслеживать положение узлов.

Поделиться
  • 0
    это возможно без веб-работников?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню