d3.js函数来过滤交互式图表 [英] d3.js function to filter the interactive chart

问题描述

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

I am new to D3.js and I am trying to customize an interactive chart. I want to add "Location" dropdown filters to chart and it should show only the selected Location's data. But not able to achieve it.

参考图表示例

这就是我被困住的地方:

This is where i got stuck:

                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);

            });

我工作的整个代码:演示

推荐答案

用以下方式重写change事件处理程序:

Rewrite you change event handler this way:

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事件处理程序.

Where helpers.mouseover it is mouseover event handler for rectangles.

在我的plnkr分支

这篇关于d3.js函数来过滤交互式图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！