如何将下拉框获取的参数传入D3.js的filter方法进行数据过滤？

尝试从HTML下拉框中获取名称，将该值作为参数传入D3.js的filter方法中。获取名称的函数运行正常，但无法将返回值作为过滤条件传入D3调用，始终出现类型错误并得到空数组。

相关代码 #

let inputvalue = getApplicatorNames();
let quotedvalue = `"${inputvalue}"`;

d3.json(PesticideDBraw).then(data => {
  const FilteredRecords = data.filter(App => App.Applicator.some(name => name.includes(quotedvalue)));

function getApplicatorNames() {
  let appSelect = document.getElementById("NameData");
  let optsSelect = appSelect.options.length;
  let appIndex = appSelect.selectedIndex;
  let ApplicatorName = appSelect.options[appSelect.selectedIndex].value;
  console.log(ApplicatorName);
  return ApplicatorName;
}

JSON数据示例 #

[
    {
        "Application Number": "46",
        "Requested By": "STEVE USSERY",
        "Date": "3/28/2000",
        "Start Time": "10:15 AM",
        "Finish Time": "12:15 PM",
        "Applicator": [
            "NICHOLAS RINGER"
        ],
        "Licensed Applicator": "STEVE USSERY",
        "Size of Area": "6000",
        "Chemical": {
            "TankMix1": "FALSE",
            "TankMix2": "FALSE",
            "Completed": "TRUE",
            "Total Solution": "45",
            "UoM": "GAL",
            "Method": "Hydraulic",
            "Location": "109",
            "Chemical (1)": "Bonzi",
            "Target/Pest (1)": [
                "PGR"
            ],
            "Rate (1)": "0.5 oz/gal",
            "Total Product (1)": "22.5",
            "Chemical (2)": "",
            "Target/Pest (2)": [
                ""
            ],
            "Rate (2)": "",
            "Total Product (2)": "",
            "Chemical (3)": "",
            "Target/Pest (3)": [
                ""
            ],
            "Rate (3)": "",
            "Total Product (3)": ""
        },
        "Completed": "TRUE"
    },
    {
        "Application Number": "48",
        "Requested By": "DEBORAH BURTON",
        "Date": "3/28/2000",
        "Start Time": "2:30 PM",
        "Finish Time": "3:45 PM",
        "Applicator": [
            "PABLO ALVAREZ-ALVARADO",
            " NICHOLAS RINGER"
        ],
        "Licensed Applicator": "DEBORAH BURTON",
        "Size of Area": "500",
        "Chemical": {
            "TankMix1": "FALSE",
            "TankMix2": "FALSE",
            "Completed": "TRUE",
            "Total Solution": "3",
            "UoM": "GAL",
            "Method": "Drench",
            "Location": "cold frame c-18",
            "Chemical (1)": "M-Pede",
            "Target/Pest (1)": [
                "Aphids"
            ],
            "Rate (1)": "1gallon to 100galllons",
            "Total Product (1)": "0.360000014",
            "Chemical (2)": "",
            "Target/Pest (2)": [
                ""
            ],
            "Rate (2)": "",
            "Total Product (2)": "",
            "Chemical (3)": "",
            "Target/Pest (3)": [
                ""
            ],
            "Rate (3)": "",
            "Total Product (3)": ""
        },
        "Completed": "TRUE"
    }
]

核心问题 #

1. 多余的双引号包裹：你给inputvalue套了额外的双引号（quotedvalue），但JSON中Applicator数组里的名称本身是不带外层双引号的字符串值，用带引号的字符串去匹配自然找不到结果。
2. 时机问题：提前调用getApplicatorNames()获取值，可能在D3加载JSON的异步过程中，用户已经修改了下拉框选项，导致过滤时用的是旧值。
3. 空格兼容问题：JSON中部分名称带有前置空格（如" NICHOLAS RINGER"），直接匹配会因为空格导致失败。

修正后的代码 #

function getApplicatorNames() {
  let appSelect = document.getElementById("NameData");
  // 去除名称前后空格，避免匹配异常
  let ApplicatorName = appSelect.options[appSelect.selectedIndex].value.trim();
  console.log(ApplicatorName);
  return ApplicatorName;
}

// 在JSON加载完成后获取最新的下拉框选中值
d3.json(PesticideDBraw).then(data => {
  let inputvalue = getApplicatorNames();
  const FilteredRecords = data.filter(App => 
    // 对数组中的每个名称也做去空格处理，兼容JSON里的空格问题
    App.Applicator.some(name => name.trim().includes(inputvalue))
  );
  // 处理过滤后的结果，比如渲染可视化内容
  console.log(FilteredRecords);
});

关键修改说明 #

• 移除quotedvalue变量，直接使用inputvalue进行匹配，避免多余的引号干扰。
• 给获取的名称和JSON中的名称都添加trim()处理，消除前后空格的影响。
• 将getApplicatorNames()的调用移到d3.json的回调函数内，确保获取的是JSON加载完成时的最新选中值。

内容的提问来源于stack exchange，提问作者DeMaagdJ