Question

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

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

//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

Answer 1

向下拉菜单添加选项时遇到一些问题。在您的演示中，下拉列表中缺少第一个状态选项（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);

您可以发现有关d3更新模式阅读this的更多信息。

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

1 个答案: