想知道我是否可以使用两个 html 输入元素来过滤掉 d.rating 和 d.value(见下面的代码)。如果我使用下拉列表并允许用户，我也可以动态替换 csv选择他们想要查看其可视化的 csv。
https://plnkr.co/edit/WgGs5bcHUP3AmjncivPM?p=preview
<html>
<head>
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input id="myInput" type="number">
<div class="container">
<svg width="1250" height="1080"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width");
var format = d3.format(",d");
var color = d3.scaleOrdinal(d3.schemeCategory10);
var pack = d3.pack()
.size([width, width])
.padding(1.5);
var myInput;
d3.select("#myInput").on("change", function(){
myInput = this.value;
d3.csv("austin_fsq.csv", function(d) {
d.sno = +d.sno;
if (d.sno && d.rating>=9&&d.value < myInput) return d;
}, function(error, classes) {
if (error) throw error;
var root = d3.hierarchy({children: classes})
.sum(function(d) { return d.value; })
.each(function(d) {
if (id = d.data.id) {
var id, i = id.lastIndexOf(".");
d.id = id;
d.package = id.slice(0, i);
d.class = id.slice(i + 1);
}
});
var node = svg.selectAll(".node")
.data(pack(root).leaves())
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("id", function(d) { return d.id; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.package); });
node.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.id; });
node.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
.selectAll("tspan")
.data(function(d) { return d.class.split(/(?=[A-Z][^A-Z])/g); })
.enter().append("tspan")
.attr("x", 0)
.attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
.text(function(d) { return d; });
node.append("title")
.text(function(d) { return d.data.id + "\n" + format(d.value); });
});
})
</script>
</div>
</html>最佳答案
在 if 条件(例如，使用一元运算符加号)中使用它之前，您必须将输入值转换为数字:
if (d.sno && d.rating >= 9 && d.value < +myInput) return d;
//converting to a number -----------^
这是您更新的插件: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);
}
})
这是显示它的插件，你可以设置两个值，你可以看到在你点击第二个“enter”后几乎没有延迟:https://plnkr.co/edit/AjVBK3rTOF5aI4eDDbV5?p=preview
关于javascript - 无法使用 D3JS 中的 html 输入值进行过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42241554/