d3/javascript根据输入过滤数据

抱歉，如果我的问题可能很基本，但我已经自学了，如果不了解javascript的基本原理，很难继续

为了简化我的问题，假设我有如下数据：

country, value1, value2, 
US, 100, 50,
UK, 30, 20,
Germany, 40, 30,
France, 20, 10

我想制作一个dropbox，其中value1和value2是选项。因此，当用户在dropbox中选择value1选项时，将仅显示value1的可视化

因此，我编写了一些psudo代码，如下所示，根据输入过滤数据

function update() {
var selected = menu.property("value");
data.filter((d) => return d3.keys(d[0]) === selected; )}

听起来还好吗？还是有什么事情需要解决

此外，在过滤数据之后，我需要对数据进行更多的操作。因此，我需要国家属性以及value1或value2。有人知道在过滤时如何保留国家属性吗

---

谢谢，

严格来说，您不需要过滤，您只需选择要可视化的数据属性即可：

首先，让我们根据您拥有的列创建选择菜单，d3.csv将生成一个如下所示的数组：

var data = [
  {"country":"US", "value1": 100, "value2": 50},
  {"country":"UK", "value1": 30, "value2": 20},
  {"country":"Germany", "value1": 40, "value2": 30},
  {"country":"France", "value1": 20, "value2": 10}
];

现在我们可以获得列，如果使用d3.csv，我们可以使用

data.columns

访问列。由于我们不希望将国家作为选项，只希望将值作为选项，因此可以使用

data.columns.slice（1）

将其切掉。我只是在代码片段中使用一个javascript对象，所以我使用

d3.keys（数据[0]）.slice（1）

来实现相同的效果

现在，我们可以根据数据集中的值创建一个下拉列表，其中包含：

// Create a select element
var select = d3.select("body")
  .append("select")
  .on("change", function() {
     // Log value it is changed to:
     console.log(this.value);
  })

// Add an initial option:
select.append("option")
  .html("Select Value:")

// Add the columns as options:
var options = select.selectAll(null)
  .data(values)
  .enter()
  .append("option")
  .text(function(d) { return d; });

这就给了我们：

var数据=[
{“国家”：“美国”，“价值1”：100，“价值2”：50}，
{“国家”：“英国”，“价值1”：30，“价值2”：20}，
{“国家”：“德国”，“价值1”：40，“价值2”：30}，
{“国家”：“法国”，“价值1”：20，“价值2”：10}
];
//获取列。
var值=d3.keys（数据[0]）
.切片（1）；
//创建一个select元素
var select=d3.选择（“主体”）
.append（“选择”）
.on（“更改”，函数（）{
console.log（this.value）；
})
//添加初始选项：
select.append（“选项”）
.html（“选择值：”）
//添加选项：
var options=select.selectAll（空）
.数据（值）
.输入（）
.附加（“期权”）
.text（函数（d）{return d；}）
对于您想要实现的目标来说，这可能有些过分，但请看一看。这个库是专门为你想完成的事情而设计的。非常感谢安德鲁！这正是我想知道的。干杯