Question

我一直在尝试使用单选按钮创建年龄过滤器（单击某个单选按钮后代码仅显示特定年龄组）并使用导入的JSON文件。单选按钮的年龄范围为0-20、20-30等。

我要弄清楚的是如何从单选按钮的输入值中删除字符“-”，存储其余的值（例如“ 0”和“ 20”），并将其与JSON文件进行比较？

以下是我所拥有的：

HTML

<h3 id="title3">Age</h3>
  <div class="radioButtonBoxMenu">
    <label><input name="radiob" type="radio" value="0-20">0-20</label><br>
    <label><input name="radiob" type="radio" value="20-30">20-30</label><br>
    <label><input name="radiob" type="radio" value="30-40">30-40</label><br>
    <label><input name="radiob" type="radio" value="40">40+</label><br>
  </div>

JSON文件的一小部分

"nodes":[
          { "id": "1", "name": "John", "age": "31", "gender": "M"},
          { "id": "2", "name": "Emily", "age": "23", "gender": "F" },
          { "id": "3", "name": "Crystal", "age": "23", "gender": "F" },
          { "id": "4", "name": "Himiko", "age": "23", "gender": "F" }
        ]

JavaScript

    //Code for radio button filter on age range
    d3.selectAll("input[name=radiob]").on("change", function(d) {

        var value = this.value;
        var age = document.getElementsByName("radiob");
        var ageBracket;

        node.style("opacity", 1);
        link.style("opacity", 1);


        for (var i = 0; i < age.length; i++) {
            if (age[i].checked) {
                ageBracket = age[i].value;

                if (ageBracket == "0-20") {
                  //Do something...

                }

            }
        }


        if (value !== "") {
            node.filter(function(d) {
                    return d.age != value;
                })
                .style("opacity", "0.2");

            link.filter(function(d) {
                    return d.source.age != value &&
                        d.target.age != value;
                })
                .style("opacity", "0.2");

            link.filter(function(d) {
                    return d.source.age == value ||
                        d.target.age == value;
                })
                .style("opacity", "1");
        }

    });

Answer 1

用类似以下的方法替换for循环应该做到这一点：

var matchingRows;
for (var i = 0; i < age.length; i++) {
    if (age[i].checked) {
        ageBracket = age[i].value.split('-');
        matchingRows = jsonRows.filter( function( row ) {
            return row.age >= ageBracket[0] && row.age <= ageBracket[1];
        } );
        break;
    }
}
console.dir( matchingRows );

split方法将从您的范围字符串创建一个数组，将'0-20'变成[0，20]。然后，您可以从JSON对象中过滤数据（假设这些行在数组中-否则，请使用Array.from（）进行转换）。这应该给您一个与所选单选按钮匹配的行数组。

Answer 2

演示

var ageBracket = '0-20';

var nodes = [
          { "id": "1", "name": "John", "age": "31", "gender": "M"},
          { "id": "2", "name": "Emily", "age": "18", "gender": "F" },
          { "id": "3", "name": "Crystal", "age": "23", "gender": "F" },
          { "id": "4", "name": "Himiko", "age": "23", "gender": "F" }
        ];

// Split the input radio value and convert the elements of an array into Number.
var ageRange = ageBracket.split('-').map(Number);

// Apply filter() method on nodes array to filter out the data between the ageRange.  
var selectedRangeDetails = nodes.filter(obj => obj.age >= ageRange[0] && obj.age <= ageRange[1]);

console.log("selectedRangeDetails", selectedRangeDetails);

通过单选按钮更改和存储值

2 个答案: