Question

我是D3.js的新手，我正在尝试自定义交互式图表。我想在图表中添加“位置”下拉过滤器，它应该只显示所选位置的数据。但是无法实现它。

这就是我被困的地方：

                dropDown.on("change", function () {
                var selected = this.value;
                displayOthers = this.checked ? "inline" : "none";
                display = this.checked ? "none" : "inline";

                hGsvg.selectAll(".bar").data(data[this.value])
                    .filter(function() {return (selected != sF) ;})
                    .attr("display", displayOthers);


                hGsvg.selectAll(".bar").data(data[this.value])
                    .filter(function() {return (selected == sF) ;})
                    .attr("display", display);

                console.log(selected);

            });

我处理的整个代码：DEMO

Answer 1

以这种方式重写change事件处理程序：

dropDown.on("change", 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) });
});

其中helpers.mouseover为mouseover矩形的事件处理程序。

检查my fork of your plnkr

中的完整代码

d3.js用于过滤交互式图表的功能

1 个答案: