从单选按钮更改和存储值答案

【问题标题】：Changing and storing value from radio buttons从单选按钮更改和存储值
【发布时间】：2018-07-12 21:45:25
【问题描述】：

我一直在尝试使用单选按钮（代码应在单击某个单选按钮后仅显示特定年龄组）并使用导入的 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");
        }

    });

【问题讨论】：

我添加了答案，希望它会按照您的期望工作。谢谢

标签： javascript json d3.js radio-button

【解决方案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() 来转换它们）。这应该会为您提供与所选单选按钮匹配的行数组。

【讨论】：

很好的答案，但是您缺少两件事：1.您必须将字符串转换为数字（例如["0", "20"] 到[0, 20]），否则比较将失败。它可以只是+ageBracket[0] 等，带有一元加号。 2. 是-，不是_。
嗯，我不需要将字符串转换为数字来进行比较。 25 > ["20", "30"][ 0 ] 计算结果为真，25 > ["20", "30"][ 1 ] 为假。（虽然我当然不反对明确转换）感谢指出错误的横线字符！
这是我的错，我认为row.age 也是一个字符串，如果是这样，比较就会失败。但是由于row.age 是一个数字，所以字符串会自动强制转换为数字，所以不需要一元加号，我错了......无论如何，明确地将字符串转换为数字总是一件好事，你永远不知道有人会怎么做稍后在代码中处理该字符串...
您好，对于“jsonRows”，我将其替换为“d.filter(function(d) { return d.age >= ageBracket[0] && d.age
看起来您正在使用 d 来表示两个不同的值。作为 d.filter 的 d 应该包含 JSON 文件中称为“节点”的对象数组。当过滤器函数循环遍历数组时，过滤器函数中的 d 将一次代表这些对象中的一个。在你调用过滤器方法之前 d 的值是多少？

【解决方案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);

【讨论】：