首页 > 解决方案 > 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);
        
};

标签: d3.jsdropdown

解决方案


推荐阅读