Javascript 如何更新D3中的多重折线图数据？

我已经挑选了两个不同的例子，以尽可能深入了解。我有一个简单的双线折线图，由一个对象提供。为了进行测试，我创建了一个函数，通过在末尾添加一个新的数据点来增加数据。我希望我的图表能反映出这些新增内容

工作原理：

• 数据被添加到对象中
• 单击按钮时，YScale将进行调整

什么不起作用：

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

一团糟。就在我认为我理解D3的时候，数据合并让我谦卑

这里有一些代码和代码

更新：这里是它的预期工作。我知道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);
};

---

如有任何见解，将不胜感激

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

我经常使用的一种方法是从数据本身获取用于更新数据的选择器。在本例中，您可以使用

数据组

对象的

键

属性：

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
的形式获取密钥，并将其用作选择器

这是你的工作示例。
亲爱的莱恩，我的解决方案对你有帮助吗？