d3 使用下拉列表过滤列标题答案

【问题标题】：d3 use drop down to filter for column headersd3 使用下拉列表过滤列标题
【发布时间】：2014-02-19 18:00:05
【问题描述】：

我有一个 csv 中的数据，其中国家作为列标题，并且有一系列以日期作为主键的行数据。

我正在尝试的应该是相当直截了当的，但我无法让它发挥作用。我有一个包含国家列标题的下拉框。一旦选择了这些，我想引用选择来填充图表。

如果我明确说明列标题的名称，即如果标题是 USA，它将加载该列的所有数据，我目前可以使用此功能。

data1.forEach(function(d) {
                    d.Date = parseDate(d.Date);
                    d.country= d.USA;

                    });

但是我需要这个基于我可以得到的所选项目

var myCountry = this.options[this.selectedIndex].__data__;

我只是想念如何使用这个变量来引用列 d.USA

【问题讨论】：

您的问题的工作示例，如 jsfiddle，在这里会很好。你试过d.country = d[myCountry];
这里是 jsfiddle.net/enzo267/4h9S2/7 第 81 行参考 d.USA 的一个示例，但我希望这是基于第 74 行的下拉选择
这个实现有几个问题...数据破坏和不遵循进入/更新/退出模式使得它不适合更新。使用最小的更改 使这项工作的唯一方法是保护数据免受更改并删除再现之间的图表元素，如您可以看到in this fiddle that I hacked。但是，再一次，这不是生活的方式，其他有更多时间的人可以建造比这更好的东西。
一般来说，列标题是未知的，下拉列表会自动填充，因此除非我列出我想避免的所有可能的情况，否则这不是一个真正的选择。我相信这是可以做到的，如果你能给我一个大致的方向，我将不胜感激。我是 d3 的新手，并且已经看到使用 map 函数实现了类似的功能，但我不确定在这种情况下这将如何工作
在 D3 中最坚实的基础是理解进入/更新/退出模式（我一直称之为 EUE）。掌握这一点对于优雅地表示数据更新（定量或定性）至关重要。 Here 是对此的规范写作。在previous answer 中，我重新处理了问题中的原始代码以利用该模式。我一直在写练习题，把它铭刻在我的脑海里:-)。

标签： d3.js

【解决方案1】：

好的，这是我之前尝试过的一个简单修复，Josh 建议但在我的原始代码中不起作用。 jsfiddle.net/enzo267/hK8kG/1

【讨论】：