更改文本并从dc.selectMenu中删除“全选” [英] Change text and remove Select All from dc.selectMenu
问题描述
<!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>
两个问题
1）如果您注意到在JSFiddle中，我们在下拉列表中获取键和值。我们只需要键，即我们只需要下拉菜单中的All，Dept 1，Dept 2等。
1) If you notice in JSFiddle, we get keys and values in the drop-down. We only need keys i.e. we only need All, Dept one, Dept two and so on in the drop-down.
2）因为我已经有一个内置数据的全部选项，如何从下拉列表中删除hintText值？
2) Since I already have a data-inbuilt "All" option, how do I remove the promptText value from the drop-down?
推荐答案
-
有点埋在文档中，但根示例显示了如何使用
.title（）设置选项文本，例如：
It's a little buried in the documentation but the root example shows how you can use
.title()to set the option text, like so:
.title(kv => kv.key)
第一个元素似乎在其中被硬编码，所以我会听 pretransition 事件并使用属性选择器，选择选项，并留空值并将其删除：
That first element seems to be hard-coded in there, so I'd listen to the pretransition event and use an attribute selector to choose the option with the blank value and remove it:
selbox.on('pretransition', function() {
selbox.select('option[value=""]').remove();
})
.filter("Dept 1")
注意：如果您的行不是完全不同的，则可能会遇到其他图表未正确加总的情况。
Note: you may run into other charts not adding up correctly if your rows aren't completely distinct.
这篇关于更改文本并从dc.selectMenu中删除“全选”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
