如何更改現有 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創建從初始 state 到最終 state 的過渡。 例如...

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