如何在 D3 中更新我的多折线图数据

How do I update my multiple line chart data in D3?

本文关键字：我的 折线图 数据 更新 D3      更新时间：2023-09-26

我挑选了几个不同的例子来达到我所拥有的目的。我有一个简单的双线图，由一个对象提供。为了进行测试，我创建了一个函数，该函数通过在末尾添加新数据点来递增数据。我希望我的图表反映这些补充。

什么有效：

  • 数据将添加到对象中。
  • 单击按钮时，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对象的 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的形式获取密钥并将其用作选择器。

这是您的工作示例的小提琴的一个分支。

相关文章：