如何修改此d3可视化中按钮的逻辑？

Question

我有一个d3可视化（codepen here），我试图修改选择器按钮的逻辑。 他们现在读：

• 大家
• 男（全部）
• 女（全部）
• 马尔代夫男性
• 马尔代夫女性
• 外国男性
• 外国女性

我想什么做的是组

• 大家
• 马尔代夫
• 外国人

，并组

• 男
• 女

...这样总共不会超过五个按钮。

例如，该图像将默认为“所有人”，因为它目前确实如此。如果从默认情况下，我点击“女性”，它会给我数据流“female_all”。如果我进一步选择，例如“马尔代夫人”，我会得到数据流“Female_Maldivian”（显然这与“外国人”和/或“男性”的任何选择是相互排斥的）。

我该如何做到这一点？

一些看似相关代码：

<div id="buttons"> 
<div class="button current" data-val="all">Everyone</div> 
<div class="button" data-val="female_all">Females</div> 
<div class="button" data-val="male_all" style="margin-right:0">Males</div> 
<div class="button" data-val="female_maldivian">Female Maldivians</div> 
<div class="button" data-val="male_maldivian" style="margin-right">Male Maldivians</div> 
<div class="button" data-val="female_foreign">Female Foreigners</div> 
<div class="button" data-val="male_foreign" style="margin-right">Male Foreigners</div> 
<div class="clr"></div> 

在进步，非常感谢您的帮助。

Answer 1

最简单的方法之一就是改变数据。但如果不是这个选项，我会调整你的代码来理解HTML按钮上的多个数据值。因此，你可以将它们分组来招待你的数据文件的多列，它会编译和... ...如：

<div class="button" data-val="female_maldivian,male_maldivian">Maldivians</div> 

就作罢女性和男性马尔代夫的总和。因此，您可以混合并匹配数据文件中的任何字段并绘制图表。检查'area_older'&'area_younger'功能的变化。

&退房在工作小提琴：https://jsfiddle.net/9rcfgmfb/