Javascript 如何删除“附加提示选项”；选择全部"；从dc.js选择菜单？

我有一个值为a，B，C，D的维

我想用dc.js创建一个selectMenu，其中

• 默认情况下，选择值A

• 只能选择一个值（无多个选择）

• 始终必须选择一个值

a） 我使用了

.multiple（false）

，希望默认情况下选择一个值。 但是，菜单的默认状态是选择所有可用选项（=无过滤）

b） 我还尝试将

promptitle

和

promptValue

设置为我想要的初始值A。 另请参阅

但是，选项A将显示两次（并且应用初始值也不起作用）：

---

c） 我还尝试使用方法

filterDisplayed

。但是，只有单个选项作为参数传递，这里似乎没有禁用“全选”选项的方法

A.以下是单个选择组合框的手动实现：

<div>
    <label>Type</label>
    <select id='type' style='padding:5px;'>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
</div>

这里是另一种方法的完整示例。它基于在回答旧的重复问题时使用的

pretransition

事件

dc演示
颜色数：
颜色的值和：
年龄数：
年龄的价值总和：
类型
价值观：
让数据=[
{颜色：'red'，年龄：1，类型：'A'，值：10}，
{颜色：'red'，年龄：1，类型：'B'，值：11}，
{颜色：'red'，年龄：1，类型：'C'，值：12}，
{颜色：'red'，年龄：1，类型：'D'，值：13}，
{颜色：'red'，年龄：2，类型：'A'，值：20}，
{颜色：'red'，年龄：2，类型：'B'，值：21}，
{颜色：'red'，年龄：2，类型：'C'，值：22}，
{颜色：'red'，年龄：2，类型：'D'，值：23}，
{颜色：'red'，年龄：3，类型：'A'，值：30}，
{颜色：'red'，年龄：3，类型：'B'，值：31}，
{颜色：'red'，年龄：3，类型：'C'，值：32}，
{颜色：'red'，年龄：3，类型：'D'，值：33}，
{颜色：'green'，年龄：1，类型：'A'，值：100}，
{颜色：“绿色”，年龄：1，类型：“B”，值：105}，
{颜色：'green'，年龄：1，类型：'C'，值：110}，
{颜色：'green'，年龄：1，类型：'D'，值：115}，
{颜色：'green'，年龄：2，类型：'A'，值：120}，
{颜色：“绿色”，年龄：2，类型：“B”，值：125}，
{颜色：'green'，年龄：2，类型：'C'，值：130}，
{颜色：'green'，年龄：2，类型：'D'，值：135}，
{颜色：'green'，年龄：3，类型：'A'，值：140}，
{颜色：'green'，年龄：3，类型：'B'，值：145}，
{颜色：'green'，年龄：3，类型：'C'，值：150}，
{颜色：'green'，年龄：3，类型：'D'，值：155}，
{颜色：'blue'，年龄：1，类型：'A'，值：300}，
{颜色：'blue'，年龄：1，类型：'B'，值：305}，
{颜色：'blue'，年龄：1，类型：'C'，值：310}，
{颜色：'blue'，年龄：1，类型：'D'，值：315}，
{颜色：'blue'，年龄：2，类型：'A'，值：320}，
{颜色：'blue'，年龄：2，类型：'B'，值：325}，
{颜色：'blue'，年龄：2，类型：'C'，值：330}，
{颜色：'blue'，年龄：2，类型：'D'，值：335}，
{颜色：'blue'，年龄：3，类型：'A'，值：340}，
{颜色：'blue'，年龄：3，类型：'B'，值：345}，
{颜色：'blue'，年龄：3，类型：'C'，值：350}，
{颜色：'blue'，年龄：3，类型：'D'，值：355}，
];
//创建交叉过滤器的实例
设cf=交叉滤波器（数据）；			 
//定义维度和组
设colorDim=cf.dimension（d=>d.color）；
让colorGroupCount=colorDim.group（）.reduceCount（）；
让colorGroupValueSum=colorDim.group（）.reduceSum（d=>d.value）；
设ageDim=cf.dimension（d=>d.age）；
让ageGroupCount=ageDim.group（）.reduceCount（）；
让ageGroupValueSum=ageDim.group（）.reduceSum（d=>d.value）；
设typeDim=cf.dimension（d=>d.type）；
让typeGroupCount=typeDim.group（）.reduceCount（）；
让typeGroupValueSum=typeDim.group（）.reduceSum（d=>d.value）；
设colorAgeDim=cf.dimension（d=>[d.color，d.age]）；
函数reduceAdd（上一个，当前）{
如果（当前）{
if（current.value！==null）{
if（previous.sum==null）{
previous.sum=current.value；
上一个.count=1；
}否则{
previous.sum+=current.value；
前一个计数+=1；
}
} 
} 
返回上一个；
}
函数还原删除（上一个，当前）{
如果（当前）{
if（current.value！==null）{
if（previous.sum！==null）{
previous.sum-=current.value；
上一个.count-=1；
如果（previous.count==0）{
previous.sum=null；
}
} 
} 
} 
返回上一个；
}
函数还原单元（上一个）{
返回{
总和：空，
计数：0
};
}
让colorAgeGroup=colorAgeDim.group（）
.reduce（reducead，reduceRemove，reduceInit）；
让filteredColorAgeGroup=删除丢失条目（colorAgeGroup）；
函数removeMissingEntries（源组）{
返回{
全部：函数（）{
返回sourceGroup.all（）.filter（函数（d）{
返回d.value.sum！==null；
});
}
};
}
设序数颜色=['红色'，'绿色'，'蓝色'
<div>
    <label>Type</label>
    <select id='type' style='padding:5px;'>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
</div>

dc.renderAll();

d3.select('#type')
  .on('change', applyTypeSelection);

applyTypeSelection();

function applyTypeSelection(){
    let selectedType = d3.select('#type').node().value;
    typeDim.filter(type => {
      return type === selectedType;
    });
    dc.redrawAll();                
}

dc.selectMenu('#type') 
  .dimension(typeDim)                         
  .multiple(false)
  .group(typeGroupCount)
  .title(d => d.key)
  .on('pretransition', event => {
        typeSelection.select('option[value=""]')
   .remove();
   })
   .filter('A');