如何同时使用 2 个范围滑块？

我想使用 2 个范围滑块同时根据年龄和身高过滤表中的数据。

我已经使用以下方法实现了 2 个范围滑块（年龄和身高）d3.slider.js https://github.com/MasterMaps/d3-slider and a dc.dataTable。我想同时使用这两个范围滑块，但它们似乎无法正常工作。

另外，表格下方有文字“从 49 条记录中选择 49 条”。使用滑块时数字不会改变。

Code:

    var dataTable = dc.dataTable("table#list");
    var dispatch = d3.dispatch('load','filter');

    d3.json('data.json',function(json){
        dispatch.load(json)
    });

    dispatch.on('load',function(json) {
        var formatNumber = d3.format( ",d");
        var facts = crossfilter(json);
        var dimensionAge = facts.dimension(function(d) {
            return +d.age;
        });
        var accessorAge = function(d) {
            return d.age;
        };
        var dimensionHeight = facts.dimension(function(d) {
            return +d.height;
        });
        var accessorHeight = function(d) {
            return d.height;
        };
        var range = d3.extent(json, accessorAge);
        var range2 = d3.extent(json, accessorHeight);
        var all = facts.groupAll();

        d3.select("div#slider3")
            .call(d3.slider().axis(true).min(range[0]).max(range[1]).value(range)
            .on("slide", function(evt,value) {
                dispatch.filter(value);
                d3.select("#slider3textmin").text(Math.floor(value[0]));
                d3.select("#slider3textmax").text(Math.floor(value[1]))
            }))

        d3.select("div#slider4")
            .call(d3.slider().axis(true).min(range2[0]).max(range2[1]).value(range2)
            .on("slide", function(evt,value) {
                dispatch.filter(value);
                d3.select("#slider4textmin").text(Math.floor(value[0]));
                d3.select("#slider4textmax").text(Math.floor(value[1]))
            }))


        FieldNames = [
            "",
            "Age",
            "Weight",
            "Height",
            "Eye Color",
            "Hair Color",
            "Race",
            "Sex",
            "Annual Income"
        ];

        d3.select("tr#FieldNames").selectAll("th")
            .data(FieldNames)
            .enter()
            .append("th") 
            .append("text")
            .text(function(d){ 
                return d;
            });

        dataTable
            .dimension(dimensionAge)
            .group(function(d) {
                return d.sex;
            })
            .columns([
                function(d) {return "";},
                function(d) {return d.age;},
                function(d) {return d.weight;},
                function(d) {return d.height;},
                function(d) {return d.eyeColor;},
                function(d) {return d.hairColor;},
                function(d) {return d.race;},
                function(d) {return d.sex;},
                function(d) {return formatNumber(d.annualIncome);}
            ]);   

        dispatch.on('filter',function(value){
            dataTable.replaceFilter(dc.filters.RangedFilter(value[0], value[1]));
            dataTable.redraw();
        })

        dc.dataCount(".dc-data-count")
            .dimension(facts)
            .group(all);

        dc.renderAll();

    });

网站链接 http://d3.magnetica-hosting.sk/sortable-table-with-slider.html

Plunker http://plnkr.co/edit/Di9O8w5NkDOIoh9fL1qW?p=preview

原始回复.

d3.slider.js 的良好使用 - 我以前没有见过它与 dc.js 一起使用。

乍一看，我发现这里有两个问题。首先，您正在使用一个 调度两个滑块，因此两个滑块都在过滤年龄， 因为那是桌子的尺寸。你可能想要创建 按高度过滤的另一个维度，您实际上并不需要 将其附加到图表中。

其次，不仅仅是使用 dataTable.redraw() 重新绘制图表， 您可能想调用 dataTable.redrawGroup() 以便所有图表 其图表组中的内容被重新绘制，包括 dataCount。

具体来说：

1. 您的调度中需要两个过滤器事件

   var dispatch = d3.dispatch('load','filterAge','filterHeight');
   

2. 年龄滑块将调用filterAge

               dispatch.filterAge(value);
   

   并且高度滑块将调用filterHeight

               dispatch.filterHeight(value);
   

3. 当前的filter事件处理程序现在将处理filterAge它会调用redrawGroup

       dispatch.on('filterAge',function(value){
           dataTable.replaceFilter(dc.filters.RangedFilter(value[0], value[1]));
           dataTable.redrawGroup();
       })
   

4. 我们添加另一个filterHeight直接过滤的处理程序dimensionHeight并重新绘制图表组

       dispatch.on('filterHeight',function(value){
           dimensionHeight.filter([value[0], value[1]]);
           dataTable.redrawGroup();
       })
   

5. 重置全部还必须清除dimensionHeight。 （由于任何图表均未使用此维度，dc.filterAll()不会找到它。）

           <a href="javascript: dimensionHeight.filter(null); dc.filterAll(); dc.renderAll();">Reset All</a>
   

你的笨蛋的叉子 http://plnkr.co/edit/LKTE577KX8bb7SGlhY64?p=preview.