如何修改此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/