javascript - 在添加新过滤器之前重置过滤器

Question

我正在做一项要求我使用 D3 的家庭作业。

我正在构建一个用户应该能够过滤的交互式表格。我有两个半工作版本。

版本一:第一次搜索时效果很好，但后续搜索会过滤掉之前的结果。 (例如，如果我先按位置过滤，然后按日期过滤，而不是得到一组全新的结果，我会得到一个使用两个过滤器的列表。如果我在第二次搜索中输入新位置，我不会得到任何结果，因为每一行只有一个位置。)

版本二:进行新搜索，但一次只应用一个过滤器(以最后一个为准)。

我的原始代码贴在下面。

我尝试使用 tbody.html(""); 来重置表格；那没有用。

我尝试将筛选结果的名称切换为 tableData2。 (这确实为我的每次点击按钮提供了一个全新的开始，但剥夺了我搜索多个条件的能力。)

我之前还尝试将所有过滤器放入定义 tableData 的最后一行(此处):

tableData = tableData.filter(row => row.shape==inputShape)

但这没有用。

button.on("click", function() {
    d3.event.preventDefault() 
    //Add date filter
    let dateElement = d3.select("#datetime");
    let inputDate = dateElement.property("value");
    if (inputDate){
    tableData = tableData.filter(row => row.datetime==inputDate)}; //add if filter to avoid nulls
    // Add city filter
    let cityElement = d3.select("#city");
    let inputCity = cityElement.property("value");
    if(inputCity){
    tableData = tableData.filter(row => row.city==inputCity)};
    // Add state filter
    let stateElement = d3.select("#state");
    let inputState = stateElement.property("value");
    if (inputState) {
    tableData = tableData.filter(row => row.state==inputState)};
    // Add country filter
    let countryElement = d3.select("#country");
    let inputCountry = countryElement.property("value");
    if (inputCountry){
    tableData = tableData.filter(row => row.country == inputCountry)};
    // Add shape filter
    let shapeElement = d3.select("#shape");
    let inputShape = shapeElement.property("value");
    if (inputShape){
    tableData = tableData.filter(row => row.shape==inputShape)};
    buildTable(tableData);
});

预期的结果是，如果我对单个元素运行搜索，我将获得与该元素几乎匹配的所有结果。如果我对两个元素进行搜索，我会得到与这两个元素几乎匹配的所有结果。

我想要的结果是，我要么得到一个一次只能按一个元素过滤的表(但每次单击过滤器按钮时都会重置)，要么我得到一个将应用多个过滤器的表，但是一次只有一个(并且没有被要求)。

Answer 1

您的代码不起作用的原因是您在过滤时修改了原始 tableData，并在随后的过滤按钮点击中使用修改后的 tableData。

您可以通过在整个函数中使用新数组 filteredTableData 来避免这样做。

var filteredTableData = tableData;

在你的函数开始时声明上面的变量，并在你函数的其余部分用 filteredTableData 替换 tableData。

---

无需实现以下更改，以上修复即可。但是，如果您想一次对每个数组元素应用所有属性过滤器，或者让代码更简洁，您可以遵循以下方法。

您可以使用 Array.filter()过滤您的数据。

button.on("click", function () {
  d3.event.preventDefault();

  // Construct a filters object.
  var filtersObj = {
    "datetime": d3.select("#datetime").property("value"),
    "city": d3.select("#city").property("value"),
    "state": d3.select("#state").property("value"),
    "country": d3.select("#country").property("value"),
    "shape": d3.select("#shape").property("value")
  };

  // Remove properties which are undefined.
  for (var key in filtersObj) {
    if (!filtersObj[key]) {
      delete filtersObj[key];
    }
  }

  var filters = Object.entries(filtersObj);

  // Filter on properties which are defined.
  const filteredTableData = tableData.filter(item => 
    filters.every(([key, value]) => item[key] == value)
  );

  buildTable(filteredTableData);
}

您也可以不使用 Object.entries() 进行过滤和 Array.every() .

// Filter on properties which are defined.
const filteredTableData = tableData.filter(item => {
  for (var key in filtersObj) {
    if (item[key] != filtersObj[key]) {
      return false;
    }
  }
  return true; 
});

实例:

var tableData = [
  { "city": "Chicago", "state": "Illinois", "country": "USA" },
  { "city": "Dallas", "state": "Texas", "country": "USA" },
  { "city": "Los Angeles", "state": "California", "country": "USA" },
  { "city": "San Francisco", "state": "California", "country": "USA" }
];

function filterData(inputDate, inputCity, inputState, inputCountry, inputShape) {
  // Construct a filters object.
  var filtersObj = {
    "datetime": inputDate,
    "city": inputCity,
    "state": inputState,
    "country": inputCountry,
    "shape": inputShape
  };

  // Remove properties which are undefined.
  for (var key in filtersObj) {
    if (!filtersObj[key]) {
      delete filtersObj[key];
    }
  }

  var filters = Object.entries(filtersObj);

  // Filter on properties which are defined.
  const filteredTableData = tableData.filter(item => 
    filters.every(([key, value]) => item[key] == value)
  );

  console.log(JSON.stringify(filteredTableData));

}

filterData(null, "Chicago", null, null, null);
filterData(null, null, "California", null, null);
filterData(null, null, "Texas", "USA", null);