如何更改现有 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);