javascript - 如何更新 D3 中的多折线图数据？

Question

我挑选了几个不同的例子来尽可能地了解。我有一个由对象提供的简单的两线折线图。为了进行测试，我创建了一个函数，通过在末尾添加新的数据点来增加数据。我希望我的图表能够反射(reflect)这些新增内容。

什么有效:

• 数据被添加到对象中。
• 单击按钮时，YScale 会调整

什么不起作用:

• XScale 不会针对新数据进行调整。
• 团队 1 线会调整团队 2 线的数据，然后沿 Y 轴进行相应缩放。

真是一团糟。就在我以为我理解了 D3 的时候，数据整合让我感到谦卑!

这是一些代码和 a mostly-working fiddle .

更新:这是an updated fiddle让它按预期工作。我知道 D3 使很多事情变得更容易，因此，虽然它有效，但我正在寻找一种更优雅的方式来获得相同的结果。

我的数据格式...

//SET SAMPLE DATA
var data = [{
  "team": "Team 1",
  "score": 0,
  "elapsedTime": 0
}, {
  "team": "Team 1",
  "score": 2,
  "elapsedTime": 3
}, 
    ...
{
  "team": "Team 2",
  "score": 18,
  "elapsedTime": 60
}];

我的更新功能...

function updateChart(){
    //SPLIT UPDATED DATA OBJECT INTO TWO TEAMS
    dataGroup = d3.nest()
    .key(function(d) {
      return d.team;
    })
    .entries(data);

  //DRAW LINES
  dataGroup.forEach(function(d, i) {

    // Select the section we want to apply our changes to
    var vis = d3.select("#visualisation").transition();

    xScale.domain([0, d3.max(data, function(d) {
      return d.elapsedTime;
    })]);
    yScale.domain([0, d3.max(data, function(d) {
  return d.score;
    })]);

    //PROBLEM: Team 1 line changes to Team 2's data
    vis.select("#line_team1")  
      .duration(750)
      .attr("d", lineGen(d.values));
    });

    vis.select("#line_team2")
        .duration(750)
      .attr("d", lineGen(data));

    // X-SCALE NEVER ADJUSTS
    vis.select(".x.axis") // change the x axis
      .duration(750)
      .call(xAxis);

    // Y-AXIS SEEMS TO SCALE AS EXPECTED
    vis.select(".y.axis") // change the x axis
      .duration(750)
      .call(yAxis);
};

任何见解将不胜感激!

Answer 1

进一步简化代码的一种方法是将其更改为基于数据本身进行更新。

我经常使用的一个方法是从数据本身获取用于更新数据的选择器。在您的情况下，您可以使用 dataGroup 对象的 key 属性:

dataGroup.forEach(function(d, i) {
  vis.select("#line_"+d.key.toLowerCase().split(' ').join(''))
    .duration(750)
    .attr("d", lineGen(d.values));

  var maxi = d3.max(data, function(d) {
    return d.elapsedTime;
  });
  ...
});

或者您可以在 d3.nest() 调用中进行预处理，以获取 team1 形式的 key 并将其用作选择器。

这是你的 fiddle 的一个分支带有工作示例。