Question

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

什么有效：

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

什么行不通：

XScale不会调整新数据。
Team 1 line调整Team2 line的数据，然后相应地沿着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

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

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

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

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

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

1 个答案: