Как изменить данные существующей визуализации D3 и выполнить переход?

Question

Я создал элементы визуализации со следующим кодом, и он отображает все как и ожидалось:

var linkTopicComments = vis.selectAll(".linktopics")
  .data(topicLinks)
  .enter().append("path")
  .attr("class", "linktopics")
  .attr("d", topicDiagonal)
  .attr("opacity", "0.3");

Позже я обновляю связанные данные, используя следующий код, который просто меняет значение координаты x. В этом коде topicLinks является глобальным, а vis является моей визуализацией

for (var i = 0; i < topicLinks.length; i++) {
  topicLinks[i].source.x-=25;
}

Наконец, я обновил визуализацию, используя следующий код:

var linkTopicComments = vis.selectAll(".linktopics")
  .data(topicLinks)
  .transition();

К сожалению, ничего не обновляется. Есть идеи, как решить эту проблему?

Answer 1

В D3, selection.transition создает переход из исходного состояния в конечное состояние. Например ...

selection.attr("foo", 1)//initial state
    .transition()
    .attr("foo", 20)//final state

... переводит атрибут foo с 1 на 20. Кстати, поскольку мы не установили никакой длительности, будет применяться длительность по умолчанию 250 миллисекунд.

В вашем случае ...

var linkTopicComments = vis.selectAll(".linktopics")
    .data(topicLinks)
    .transition();

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

Решение довольно простое: явным образом сообщите D3, что вы хотите перейти. Например:

var linkTopicComments = vis.selectAll(".linktopics")
    .data(topicLinks)
    .transition()
    .attr("d", topicDiagonal);