Question

想知道我是否可以使用两个html输入元素来过滤掉d.rating和d.value（参见下面的代码）。如果我使用下拉列表并允许用户，也可以动态替换csv选择他们想要查看可视化的csv。

https://plnkr.co/edit/WgGs5bcHUP3AmjncivPM?p=preview

＆＃13;

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
};

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
};

handleScroll(event) {
    this.load();
};

load() {
    console.log('Loading');
    $.get('/latest-dishes?page=1&items=6', function(data) {
        console.log('Loaded');
        console.log(data);
    });
}

render() {
    return (
        <div>
            <button onClick={e => this.load()}>Load</button>
        </div>
    )
}

＆＃13;

Answer 1

在if条件下使用输入值之前，必须将输入值转换为数字（例如，使用一元运算符加上）：

if (d.sno && d.rating >= 9 && d.value < +myInput) return d;
    //converting to a number -----------^

这是您更新的plunker：https://plnkr.co/edit/wmFIxN6ZydAxLhVDSWNf?p=preview

编辑：避免使用行功能。

目前，您正在使用行功能来过滤数据。这会在输入后加载和解析CSV文件产生不良影响，这可能会导致一些延迟（从来没有良好的用户体验）。

另一种方法是在加载和解析数据后过滤数据。这是逻辑：

//d3.csv loads and parses the CSV file d3.csv("austin_fsq.csv", function(d) { d.sno = +d.sno; return d; }, function(error, data) { if (error) throw error; //check the input inside d3.csv d3.select("#myInput").on("change", function() { myInput = this.value; var classes = data.filter(d => d.value < myInput && d.rating >= 9); //on change, call a function to draw the results draw(classes); }); //the function to draw the results here function draw(classes) { //code here... } });

实际上，如果您使用这种方法，您可以轻松解决问题中的第二个问题，即获得两个输入值：

var inputs = {}; d3.selectAll("input").on("change", function() { inputs[this.id] = +this.value; if (inputs.myValue && inputs.myRating) { var classes = data.filter(d => d.value < inputs.myValue && d.rating >= inputs.myRating); draw(classes); } })

以下是显示它的plunker，您可以设置这两个值，并且您可以看到在击中＆＃34;输入＆＃34;之后几乎没有延迟。对于第二个：https://plnkr.co/edit/AjVBK3rTOF5aI4eDDbV5?p=preview

无法使用D3JS中的html输入值进行过滤

1 个答案: