Question

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

每个人
男（全部）
女（全部）
马尔代夫男性
马尔代夫女性
外国男性
外国女性

我想做的就是小组

每个人
马尔
外国人

还有小组

男
女

...所以总共不超过五个按钮。

例如，图表将默认为“＃34;每个人”。＃34;如果，从默认情况下，我点击了＆＃34;女性，＆＃34;它会给我数据流＆＃34; female_all。＆＃34;如果我做了进一步的选择，例如＆＃34;马尔，＆＃34;我会得到数据流＆＃34; Female_Maldivian＆＃34; （这显然是对＃34;外国人＆＃34;和/或＆＃34;男性＆＃34;）的任何选择互斥。

我如何实现这一目标？

一些看似相关的代码：

<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>

会给你一笔女性和男性马尔代夫人。因此，您可以混合和匹配数据文件中的任何字段并绘制图表。检查＆＃39; area_older＆＃39; ＆安培; ＆＃39; area_younger＆＃39;改变的功能。

＆安培;看看工作小提琴：https://jsfiddle.net/9rcfgmfb/

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

1 个答案: