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

我已经挑选了几个不同的示例以获得尽可能远的效果。我有一个简单的双线折线图由一个对象提供。为了测试，我创建了一个函数，通过在最后添加一个新的数据点来增加数据。我希望我的图表反映这些增加。如何在D3中更新我的多个折线图数据？

什么工作：

的数据被添加到该对象。
当按钮点击后，YScale调整

什么不起作用：

的XScale不调整新数据。
团队1线适应Team2线的数据，然后相应地沿着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); 
};

任何有识之士将不胜感激！

来源

2016-04-27 Layne

亲爱的莱恩，我的解决方案对你有帮助吗？ – iulian

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

我经常使用的方法是获取用于从数据本身更新数据的选择器。你的情况，你可以用你的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形式的密钥，并用它作为一个选择。

下面是您的fiddle的一个分支和工作示例。

来源

2016-04-27 19:59:25 iulian

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

回答

相关问题