根据下拉菜单返回数据? [英] Return data based on dropdown menu?
本文介绍了根据下拉菜单返回数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在建立一个基本的散点图,其中我想根据下拉选项突出我的情节中的特定点。我的代码如下所示:
I am building a basic scatter plot where I'd like to highlight specific points in my plot based on a dropdown selection. My code looks like this:
fill_arr = fill.range();
labels = ["A", "B", "C", "D"];
options = [0, 1, 2, 3];
// Build the dropdown menu
d3.select("#drop")
.append("select")
.selectAll("option")
.data(options)
.enter()
.append("option")
// Provide available text for the dropdown options
.text(function(d) {return labels[d];})
d3.select('select')
.on("change", function() {
// HOW CAN I GET THE OPTION THAT THE USER HAS SELECTED FROM THE DROPDOWN?
key = 0 // <- I can do this manually, but I want to get the label the user has selected
d3.selectAll('circle')
.transition()
.duration(300)
.ease("quad")
.attr( 'r', 5)
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
// if a data point is selected highlight other
// data points of the same color
.style('fill', function(d, i) {
if (d.label == key)
{return fill_arr[key]}
else {return "#ccc"}
;})
});
我的问题是,我不知道如何确定用户从下拉列表中选择了什么。如何确定用户已选择 [A,B,C,D]
的选项?
My issue is that I don't know how to determine what the user has selected from the dropdown. How can I determine which option, ["A", "B", "C", "D"]
the user has selected?
推荐答案
使用 this.selectedIndex
访问它:
d3.select('select')
.on("change", function() {
key = this.selectedIndex;
d3.selectAll('circle')
.transition()
.duration(300)
.ease("quad")
.attr( 'r', 5)
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
// if a data point is selected highlight other
// data points of the same color
.style('fill', function(d, i) {
if (d.label == key)
{return fill_arr[key]}
else {return "#ccc"}
;})
});
这篇关于根据下拉菜单返回数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文