Question

我正在使用一个非常大的数据立方体，我需要操作它以进行数据可视化。我有一个多维数组包含每个可能的对象组合的数组，每个数组的最终对象是一个关联的值。

我正在使用多个输入（每个输入都根据数据中的值索引枚举id）允许用户按照数组中的每个对象过滤结果，但显示为“总可用”的最后一个对象除外。从这些输入我将选择聚合到一个变量中，以便选择的索引对应于数据中相关值的索引位置。

var selections = [];
var data = [[val0, val1, val2, 5121231], [val0, val1, val2, 2242], [val0, val1, val2, 72356], [val0, val1, val2, 24122], [val0, val1, val2, 75632]];

$('#fields').change(function(){
    for (var i = 0; i < data[0].length; i ++){
        selections[i] = $('select#field' + i).val();
    }
});

这将创建一个如下所示的多维数组：

selections = [[data[0][0], data[1][0], data[2][0], data[3][0], data[4][0]], [data[0][1], data[1][1], data[2][1], data[3][1], data[4][1]], [data[0][2], data[1][2], data[2][2], data[3][2], data[4][2]], [data[0][3], data[1][3], data[2][3], data[3][3], data[4][3]]]

我正在尝试做的是过滤数据，以便对于所有选择，如果data [x] [i] ===选择[i]中的任何值，则将data [x]填充到新数组中。

有什么想法？

***** UPDATE *****

非常感谢Dave的帮助！我们能够设置依赖下拉过滤器来操作无密钥多维数组（数据立方体）。如果您在浏览器中使用大型数据集，请查看解决方案。这是他/我们提出的：

https://jsfiddle.net/JSnoobDC16/yteu6cbb/28/

Answer 1

由于您使用的是jQuery，因此可以使用$.grep()结合Array.some()轻松解决此问题。

var newArray = $.grep(data, function(item) {
  return selections.some(function(selectedValue, i) {
    return selectedValue.indexOf(item[i]) >= 0;
  });
});

下面有一个完整的片段，并在此更新了小提琴：https://jsfiddle.net/gh8fzxLh/

＆＃13;

//function to initialize the materialize dropdowns
function pageReady() {
  $(document).ready(function() {
    $('select').material_select();
  });
}

//function to get the sum of object elements
function sum( obj ) {
  var sums = 0;
  for( var el in obj ) {	
    if( obj.hasOwnProperty( el ) ) {
      sums += parseFloat( obj[el] );
    }
  }
  return sums;
}

//function to return array of all values at a certain index positon
function getFields(matrix, index){
  var fields = [];
  for (var i = 1; i<matrix.length; i++ ){
    fields.push(matrix[i][index]);
  }
  return fields;
}

//function to return only unique values from array
function unique(arr) {
  var hash = {}, uniqueArr = [];
  for ( var i = 0, l = arr.length; i < l; ++i ) {
    if ( !hash.hasOwnProperty(arr[i]) ) { 
      hash[ arr[i] ] = true;
      uniqueArr.push(arr[i]);
    }
  }
  return uniqueArr;
}

//importing data set
var data = [
  ["state", "gender", "martial staus", "ethnicity"],
  ["GA", "null", "null", "Caucasian", 5086317],
  ["FL", "", "null", "null", 4338099],
  ["IN", "M", "null", "African-American", 72238],
  ["GA", "", "married", "Caucasian", 390578],
  ["MO", "null", "null", "Caucasian", 4165871],
  ["MO", "", "married", "Caucasian", 344501],
  ["NY", "null", "null", "African-American", 1204504], 				["AR", "M", "single", "Caucasian", 164311],
  ["CO", "null", "married", "null", 551192],
  ["OH", "null", "married", "Caucasian", 1017924],
  ["LA", "M", "null", "East Asian", 3229],
  ["AZ", "F", "single", "Uncoded", 21302],
  ["AR", "", "married", "Middle Eastern", 187]
];

var selections = []; //variable to hold all selected values
var valCombos = data[0].length; //establishing number of dropdown selection objects

/* Adding multiselection dropboxes (and soon to be other data inputs)
for each field. */
for (var i = 0; i < valCombos; i ++){
  var options = unique(getFields(data, i)).sort();
  $('#selectBar').append('<div class="row section params" id="fieldRow' + i + '"><div class="col s12 input-field" id="fieldparams"><select class="fields" id="field' + i + '" multiple><option value="" disabled selected>Select Values</option></select><label>' + data[0][i] + '</label></div></div>');
  $.each(options, function (index, value) {
    $('#field' + i).append('<option value="' + value + '">' + value + '</option>');
  });
}

pageReady();

/*Updating "selections" array as user makes selections. 
"Selections" will be used to filter the cube for visualizations. */
$('.fields').change(function(){
  for (var i = 0; i < valCombos; i ++) {
    selections[i] = $('select#field' + i).val();
  }
  console.log(selections);

  var selectedData = getSelectedData(data, selections);
  
  console.log(selectedData);
  $("#count").text(sumData(selectedData));

});

function getSelectedData(data, selections) {
  return $.grep(data, function(item) {
    return selections.some(function(value, i) {
      return value.indexOf(item[i]) >= 0;
    });
  });
}

function sumData(selectedData) {
  return selectedData.reduce(function(prev, current) {
    return prev + current[current.length - 1];  
  }, 0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div id="count">
  Sum of lastIndexOf values displays here
</div>
<div id="selectBar">
</div>

＆＃13;

使用索引位置按另一个数组中的值过滤数组 - javascript

1 个答案: