时间戳

首页 > 解决方案 > 如何更改现有 D3 可视化的数据并执行转换？

javascript - 如何更改现有 D3 可视化的数据并执行转换？

问题描述

我使用以下代码创建了一个可视化元素，它按预期显示了所有内容：

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

不幸的是没有更新。知道如何解决这个问题吗？

标签： javascriptd3.jstransition

解决方案

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

推荐阅读