1

我真的可以使用一些指导在我的多系列折线图上设置过渡。作为我需要的一个例子，我从这个很棒的多系列折线图开始：http: //bl.ocks.org/mbostock/3884955。在该代码中，我添加了一个使用 setInterval() 调用一次的 update() 函数。我还创建了一个名为 data2.csv 的新数据集，它与 data.tsv 类似，但具有不同的值。

更新函数应该更改折线图显示的数据。忘记做一个很好的平滑过渡，我什至无法在图表视图中更新数据。当我尝试使用更新功能时，看起来新数据已正确加载到 javascript 变量中，但图表上的线条根本没有改变。

我已经看到这个问题的变化被问了几次，但还没有找到答案。谁能帮我弄清楚如何将这个多系列折线图转换为新的数据集（也是多系列）？

function update() {

    d3.csv("data2.csv", function(error, data) {

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

        // format the date
   data.forEach(function(d) {
        d.date = parseDate(d.date);
  });

    // rearrange the data, same as in the original example code
var cities2 = color.domain().map(function(name) {
        return {
          name: name,
          values: data.map(function(d) {
            return {date: d.date, temperature: +d[name]};
          })
        };
      });

    // update the .city g's to the new dataset
 var city2 = svg.selectAll(".city")
      .data(cities2);

    // redraw the lines with the new data??? 
  city2.selectAll("path")
      .attr("d", function(d) { return line(d.values); });

 clearInterval(transitionInterval);
});
}

更新：NikhilS 的答案包含评论线索中解决方案的关键。

4

2 回答 2

2

您应该确保遵循 Mike Bostock 在他关于General Update Pattern的资料中概述的 enter + update 过程。看起来您还没有调用任何类型的 d3 transition。您还没有为更新功能指定进入或退出，如果您有新数据进入和/或旧数据流出，这将导致问题。尝试改变这个：

 var city2 = svg.selectAll(".city")
  .data(cities2);

 city2.selectAll("path")
  .attr("d", function(d) { return line(d.values); });

到以下：

 var city2 = svg.selectAll('.city')
   .data(cities2);

 var cityGroups = city2.enter().append('g')
   .attr('class', 'city');

 cityGroups.append('path')
  .attr('class', 'line');

 d3.transition().selectAll('.line')
  .attr('d', function(d) { return line(d.values); });

 city2.exit().remove();

不久前我做了一个基本数据重新加入和更新演示，你可以在这里查看。

于 2013-05-25T04:40:50.987 回答
1

使用 d3 Transition，您可以制作某种动画。

如果要选择数据的一个子区间来绘制图形，不需要对数据进行任何操作，只需使用 d3 画笔并剪切图形即可

对于包含大部分折线图元素的多系列折线图，您可以参考以下示例： http: //mpf.vis.ywng.cloudbees.net/

于 2013-08-14T11:26:45.213 回答