在下拉过滤器中创建“全部”选项答案

【问题标题】：Create an "All" option in a dropdown filter在下拉过滤器中创建“全部”选项
【发布时间】：2017-11-28 10:23:46
【问题描述】：

我在图表中添加了一个下拉过滤器，其中使用数据加载内容：

现在我正在尝试添加“全部”作为默认选项标签，选择时会删除过滤器并将图表重置为正常状态（就像重置按钮一样）。

//create dropdown filter options
                var defaultOption = dropDown.append("option")
                    .data(sF)
                    .text("All")
                    .attr("value", "select")
                    .enter();

                var options = dropDown.selectAll("option")
                    .data(data)
                    .enter()
                    .append("option");

                options.text(function (d) { return d.State; })
                    .attr("value", function (d) { return d.State; });

            dropDown.on("", function () {
                var selected = this.value;

                hGsvg.selectAll(".bar")
                    .filter(function (d) { return (selected !== d[0]); })
                    .attr("display", 'none');

                hGsvg.selectAll(".bar")
                    .filter(function (d) { return (selected === d[0]); })
                    .attr("display", 'inline')
                    .each(function (d) { helpers.mouseover(d) });



              // Does something like this work?

                /* hGsvg.selectAll(".bar")
                    .filter(function (d) { return (selected === d[0]); })
                    .attr("display", 'inline')
                    .each(function (d) {
                        if (selected === "select") { helpers.mouseout(d) } 
                        else { helpers.mouseover(d) }
                }); */

请参考Previous version of the Chart。第一个选项不起作用，除非在另一个选项之后选择它。

#47393325

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

首先，你不需要这个：

hGsvg.selectAll(".bar")
    .filter(function(d) {
        return (selected !== d[0]);
    })
    .attr("display", 'none');

hGsvg.selectAll(".bar")
    .filter(function(d) {
        return (selected === d[0]);
    })
    .attr("display", 'inline')

所有代码都可以压缩成一个三元：

hGsvg.selectAll(".bar")
    .attr("display", function(d) {
        return selected === d[0] ? 'inline' : 'none'
    })

话虽如此，只需在该三元组中添加"All"：

hGsvg.selectAll(".bar")
    .attr("display", function(d) {
        return selected === 'All' ? 'inline' : selected === d[0] ? 'inline' : 'none';
    })

甚至更短：

hGsvg.selectAll(".bar")
    .attr("display", function(d) {
        return selected === 'All' || selected === d[0] ? 'inline' : 'none';
    })

这里是更新的 plunker：http://plnkr.co/edit/iV9r1JCuLQzqdiNcMfqc?p=preview

【讨论】：

谢谢！！但实际的第一个位置“TamilNadu”被“All”取代。该怎么办？
这与您的问题无关。请不要在 cmets 中提出其他问题。如果您还有其他问题，请发布另一个问题。无论如何，这是解决方案：plnkr.co/edit/47lhnfbs2ddAeFHqtrDv?p=preview
非常感谢！我是新用户，不习惯该网站并从下一次正确地简要介绍我的问题..
嘿，如果我应用此代码，饼图不会加载数据。（垂直滚动）
使用原始过滤器/每个组合。

【解决方案2】：

在向下拉列表中添加选项时遇到了一点问题。在您的演示中，下拉列表中缺少第一个状态选项 (TamilNadu)。

为了解决这个问题，我建议简单地在选项中添加一个类，就像这样。更新了你的demo

//create dropdown filter options
var defaultOption = dropDown.append("option")
                    .data(sF)
                    .text("All")
                    .attr("value", "select")
                    .classed("default", true)
                    .enter();

var options = dropDown.selectAll("option.state")
                    .data(data)
                    .enter()
                    .append("option")
                    .classed("state", true);

您可以通过阅读this 了解更多关于 d3 更新模式的信息。

【讨论】：