Javascript 更改和存储单选按钮的值

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

我试图说明的是，如何从单选按钮的输入值中删除“-”，存储剩余值，如“0”和“20”，并将它们与JSON文件进行比较

以下是我所拥有的：

HTML

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");
        }

    });

//年龄范围单选按钮过滤器的代码
d3.选择全部（“输入[name=radiob]”）。打开（“更改”，功能（d）{
var值=此值；
var age=document.getElementsByName（“radiob”）；
var年龄段；
节点样式（“不透明度”，1）；
链接样式（“不透明度”，1）；
对于（变量i=0；i

用类似的方法替换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 );

var匹配行；
对于（变量i=0；i=ageBracket[0]和&row.ageDemo


var年龄括号='0-20'；
变量节点=[
{“id”：“1”，“姓名”：“John”，“年龄”：“31”，“性别”：“M”}，
{“id”：“2”，“姓名”：“Emily”，“年龄”：“18”，“性别”：“F”}，
{“id”：“3”，“姓名”：“Crystal”，“年龄”：“23”，“性别”：“F”}，
{“id”：“4”，“姓名”：“Himiko”，“年龄”：“23”，“性别”：“F”}
];
//拆分输入的单选值并将数组中的元素转换为数字。
var ageRange=ageBracket.split（'-'）.map（Number）；
//对节点数组应用filter（）方法以过滤出AGRange之间的数据。
var selectedRangeDetails=nodes.filter（obj=>obj.age>=ageRange[0]&&obj.age这是一个很好的答案，但您缺少两件事：1.您必须将字符串转换为数字（如
[“0”，“20”]
转换为
[0,20]
），否则比较将失败。它可能只是
+ageBracket[0]
等，加上一元加号。2.它是
-
，而不是
.
。嗯，我不需要将字符串转换为数字来进行比较。25>[“20”，“30”][0]计算为true，25>[“20”，“30”][1]为false。（尽管我当然不反对显式转换它）谢谢你指出了错误的横线字符！这是我的错，我认为
row.age
也是一个字符串，如果是这样的话，比较就会失败。但是由于
row.age
是一个数字，字符串会自动强制为一个数字，所以不需要一元加号，我错了……无论如何，它总是一个好的字符串将字符串显式转换为数字，您永远不知道稍后代码中会有人如何处理该字符串……您好，对于“jsonRows”，我将其替换为“d.filter（function（d）{return d.age>=ageBracket[0]&&d.age看起来您正在使用d来表示两个不同的值。作为d.filter的d应该包含JSON文件中名为“nodes”的对象数组。当filter函数在数组中循环时，filter函数中的d将一次表示这些对象中的一个。在计算之前，d的值是多少我补充了答案，希望它能按照你的期望工作。谢谢
    //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");
        }

    });

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 );