如何处理d3.layout.stack（）中缺少数据点的图层 [英] How to handle layers with missing data points in d3.layout.stack()

问题描述

我使用d3.stack来创建堆叠面积图，但是如果我在每个图层中没有相等数量的项目，我会收到一个错误。我从这样的数据数组开始：

  [
 {key：'Group1'日期}，
 {key：'Group1'，value，date}，
 {key：'Group1'，value，date} ，
 {key：'Group2'，value，date} 
] 
  

在我通过nest（）和stack（）运行它之后，我按照预期结束这种格式：

  [
 {key：'Group1'，
 values：[{key，value，date}，{key，value，date}，{key，value，date}]}，
 {key：' Group2'，
 values：[{key，value，date}，{key，value，date}]} 
] 
   
 
我稍微修改了一个堆叠区域示例来演示这个jsFiddle中的问题： http://jsfiddle.net/brentkeller/rTC3c/2/  
 
 
 
如果您删除sourceData数组中的任何一个数据点，将在控制台中看到错误消息无法读取未定义的属性1。
 
 
 
有一种方法可以让d3.stack假设为零值缺少数据点？如果没有，是否有一个优雅的解决方案来填充缺少的值？
解决方案
这不是d3具体，解决方案用于填充键控数据阵列中的间隙。我使用以下函数修改了您的jsfiddle 此处：
  function assignDefaultValues（dataset）
 {
 var defaultValue = 0; 
 var keys = ['Group1'，'Group2'，'Group3']; 
 var hadData = [true，true，true]; 
 var newData = []; 
 var previousdate = new Date（）; 
 var sortByDate = function（a，b）{return a.date> b.date？ 1：-1; }; 
 
 dataset.sort（sortByDate）; 
 dataset.forEach（function（row）{
 if（row.date.valueOf（）！== previousdate.valueOf（））{
 for（var i = 0; i& keys.length; ++ i）{
 if（hadData [i] === false）{
 newData.push（{key：keys [i]，
 value：defaultValue，
 date：previousdate}）; 
} 
 hadData [i] = false; 
} 
 previousdate = row.date; 
} 
 hadData [keys.indexOf（row.key）] = true; 
}）; 
 for（i = 0; i< keys.length; ++ i）{
 if（hadData [i] === false）{
 newData.push（{key：keys [i]，value：defaultValue，
 date：previousdate}）; 
} 
} 
 return dataset.concat（newData）.sort（sortByDate）; 
} 
  
它遍历给定的数据集，每当遇到一个新的 date  value，为尚未看到的键指定默认值。
 
I'm using d3.stack to create a stacked area chart but I get an error if I have don't have an equal number of items in each layer. I'm starting with an array of data like this:
[  
   {key:'Group1',value,date},  
   {key:'Group1',value,date},  
   {key:'Group1',value,date},  
   {key:'Group2',value,date},  
   {key:'Group2',value,date}  
]
and after I run it through nest() and stack() I end up with this format, as expected:
[  
   {key: 'Group1',  
    values: [ {key,value,date}, {key,value,date}, {key,value,date} ] },  
   {key: 'Group2',  
    values: [ {key,value,date}, {key,value,date} ]  }  
]
I have slightly modified a stacked area sample to demonstrate the issue in this jsFiddle: http://jsfiddle.net/brentkeller/rTC3c/2/

If you remove any one of the data points in the sourceData array you'll see the error message "Cannot read property '1' of undefined " in the console.

Is there a way to have d3.stack just assume zero values for the missing data points?  If not, is there an elegant solution to fill in the missing values?
解决方案
This isn't d3 specific but rather a general solution for filling in the gaps in a array of keyed data. I modified your jsfiddle here with the following function: 
function assignDefaultValues( dataset )
{
    var defaultValue = 0;
    var keys = [ 'Group1' , 'Group2', 'Group3' ];
    var hadData = [ true, true, true];
    var newData = [];
    var previousdate = new Date();
    var sortByDate = function(a,b){ return a.date > b.date ? 1 : -1; };

    dataset.sort(sortByDate);
    dataset.forEach(function(row){
        if(row.date.valueOf() !== previousdate.valueOf()){
            for(var i = 0 ; i < keys.length ; ++i){
                if(hadData[i] === false){
                    newData.push( { key: keys[i], 
                                   value: defaultValue, 
                                   date: previousdate });
                }
                hadData[i] = false;
            }
            previousdate = row.date;
        }
        hadData[keys.indexOf(row.key)] = true; 
    });
    for( i = 0 ; i < keys.length ; ++i){
        if(hadData[i] === false){
            newData.push( { key: keys[i], value: defaultValue, 
                            date: previousdate });
        }
    }
    return dataset.concat(newData).sort(sortByDate);
}
It walks through the given dataset and, whenever it comes across a new date value, assigns a default value to any keys that have not yet been seen.

                        
这篇关于如何处理d3.layout.stack（）中缺少数据点的图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！