d3.js - d3.js v4 向下钻取选项 - 如何创建默认/重置值
问题描述
我创建了一个圆形包,用户可以使用下拉菜单深入了解它。
例如,该包初始化为一个圆形包,其中包含英国大学每个部门的员工人数。用户可以通过 3 个下拉菜单选择地区、城镇或大学进行深入研究。下拉菜单也是使用 d3 创建的。
但是,我无法在这些下拉列表中创建一个名为“全部”的附加选项。因为目前用户一旦下钻,就没有办法回到所有大学或所有城镇的水平。谢谢你的帮助。地区/城镇下拉列表等如下所示。
function renderRegionOptionsForDropdown(Regions, RegionSelect){
//GUP pattern to render Regions dropdown
var RegionOptions = RegionSelect //Select and bind
.selectAll('.RegionOptionClass')
.data(Regions);
//Enter Selection
RegionOptions.enter()
.append('option')
.classed("RegionOptionClass", true)
.text(d=>d)
RegionOptions //Update Selection
.text(d=>d)
RegionOptions //Exit Selection
.exit()
.remove();
}
function onRegionChange() {
selectedRegion = d3.select('#rSelectID').property('value')
filtered_data = dataModel.refEntries.filter(e=>e.context.regionProvider == selectedRegion)
var TownsinRegion = d3.nest()
.key(d=>d.lp.TOWN)
.sortKeys(d3.ascending)
.entries(filtered_data);
TownsinRegion = TownsinRegion.map(e=>e.key)
updatepack(filtered_data)
//Add Towns in the Region as options to drop-down
renderTownOptionsForDropdown(TownsinRegion,TownSelect);
};
解决方案
推荐阅读
- react-native - 如何设计 React-Native 按钮
- c# - DataGridView 不应接受具有名字和姓氏的重复 ID
- html - 在响应式图像上的元素上设置宽度和高度属性
- python - 如何使用 Flask 和 HTML 创建可变数量的链接?
- php - 从一长串 LCID 中创建一个数组
- php - 将 Zoom 与 Codeigniter (curl) 连接起来
- reactjs - React Native 如何使用 Jest 测试动画
- angular - 只允许选中一个复选框并获取选中的值
- javascript - 如何在不加载 js 的情况下获得音频的持续时间
- react-native - React Native,Native Modules 返回空对象 - {}