如何同时使用2个范围滑块? [英] How can I use 2 range sliders at the same time?

问题描述

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

I want to filter data in the table based on the age and height at the same time using 2 range sliders.

我已经使用 d3.slider.js 实现了2个范围滑块(年龄和高度)和dc.dataTable.我想同时使用这两个范围滑块，但似乎它们无法正常工作.

I have implemented 2 range sliders (Age and Height) using d3.slider.js and a dc.dataTable. I want to use these 2 range sliders at the same time, but it seems that they are not working properly.

此外，在表格下方，还有文本"49条记录中选择了49条".使用滑块时数字没有变化.

Also, under the table, there is the text "49 selected out of 49 records". The numbers are not changing while using the sliders.

代码:

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

    });

链接到网站

柱塞

推荐答案

原始回复

很好地使用d3.slider.js-之前我还没有看到它与dc.js一起使用.

Nice use of d3.slider.js - I haven't seen that used with dc.js before.

我一眼就看到了两个问题.首先，您正在使用一个 同时分配两个滑块，因此两个滑块都在过滤年龄， 因为那是桌子的尺寸.您可能想要创建 根据高度进行过滤的另一个维度，您实际上并不需要 将其附加到图表上.

At a quick glance, I see two problems here. First, you're using one dispatch for both sliders, so both sliders are filtering the age, since that's the dimension of the table. You'd probably want to create another dimension for filtering by height, and you don't really need to attach that to a chart.

第二，不仅仅是使用dataTable.redraw()重绘图表， 您可能想调用dataTable.redrawGroup()，以便所有图表 重新绘制其图表组中的数据，包括dataCount.

Second, instead of just redrawing the chart with dataTable.redraw(), you probably want to call dataTable.redrawGroup() so that all charts in its chart group get redrawn, including the dataCount.

特别是:

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

1. you'll need two filter events in your dispatch

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

年龄滑块将调用filterAge

the age slider will call filterAge

            dispatch.filterAge(value);

，高度滑块将调用filterHeight

and the height slider will call filterHeight

            dispatch.filterHeight(value);

当前filter事件处理程序现在将处理filterAge，并将调用redrawGroup

the current filter event handler will now handle filterAge and it will call redrawGroup

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

我们添加了另一个filterHeight处理程序，该处理程序直接过滤dimensionHeight并重绘了图表组

we add another filterHeight handler which directly filters dimensionHeight and also redraws the chart group

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

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

Reset All will also have to clear dimensionHeight. (Since this dimension isn't used by any chart, dc.filterAll() won't find it.)

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

矮子的叉子.

这篇关于如何同时使用2个范围滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！