更改文本并从 dc.selectMenu 中删除 Select All答案

【问题标题】：Change text and remove Select All from dc.selectMenu更改文本并从 dc.selectMenu 中删除 Select All
【发布时间】：2018-08-08 12:24:50
【问题描述】：

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

    <div id = "selectbox"> </div>
    <div id = "chart1"> </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.min.js"></script>



 <script>   
    var facts = crossfilter([
    {"Period":"Jan-18","Department":"Dept 1","Percentage":0.2098},
    {"Period":"Feb-18","Department":"Dept 1","Percentage":0.6058},
    {"Period":"Mar-18","Department":"Dept 1","Percentage":0.691},
    {"Period":"Jan-18","Department":"Dept 2","Percentage":0.2705},
    {"Period":"Feb-18","Department":"Dept 2","Percentage":0.4113},
    {"Period":"Mar-18","Department":"Dept 2","Percentage":0.3698},
    {"Period":"Jan-18","Department":"Dept 3","Percentage":0.3239},
    {"Period":"Feb-18","Department":"Dept 3","Percentage":0.4638},
    {"Period":"Mar-18","Department":"Dept 3","Percentage":0.4036},
    {"Period":"Jan-18","Department":"Dept 4","Percentage":0.8288},
    {"Period":"Feb-18","Department":"Dept 4","Percentage":0.0809},
    {"Period":"Mar-18","Department":"Dept 4","Percentage":0.9152},
    {"Period":"Jan-18","Department":"All","Percentage":0.6104},
    {"Period":"Feb-18","Department":"All","Percentage":0.3348},
    {"Period":"Mar-18","Department":"All","Percentage":0.8257},
    ])

    var PeriodDimension = facts.dimension( function (d) {return d.Period} );
    var DeptDimension = facts.dimension( function (d) {return d.Department} );

    dc.selectMenu("#selectbox")
        .dimension(DeptDimension)
        .group(DeptDimension.group())
        .promptText("removethisline")
        .controlsUseVisibility(true);

     dc.renderAll();
 </script>

</body>

JS Fiddle Here

两个问题

1) 如果您在 JSFiddle 中注意到，我们会在下拉菜单中获取键和值。我们只需要键，即我们只需要下拉菜单中的 All、Dept one、Dept 2 等。

2) 由于我已经有一个数据内置的“全部”选项，如何从下拉列表中删除 promptText 值？

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

有点buried in the documentation，但根示例显示了如何使用.title() 设置选项文本，如下所示：
```
.title(kv => kv.key)
```
第一个元素在那里似乎是硬编码的，所以我会听pretransition 事件并使用attribute selector 选择具有空白值的option 并将其删除：
```
selbox.on('pretransition', function() {
  selbox.select('option[value=""]').remove();
})
.filter("Dept 1")
```

注意：如果您的行不完全不同，您可能会遇到其他图表无法正确添加。

Fork of your fiddle.

【讨论】：

【解决方案2】：

对于后代，上述答案对我使用 CboxMenu 不起作用，但这样做：

cbox.filter("Dept 1")
.on('pretransition', function() {
  cbox.selectAll('li:not(.dc-cbox-item)').remove();
})

【讨论】：