Question

我正在使用d3.js刷新直方图，并使用crossfilter.js过滤视图：

var chart = scatterPlot()
    .width(350)
    .height(350)
    .x(function (d) { return d.key[0] })
    .y(function (d) { return d.key[1] });

d3.csv("data.csv", function (data) {// data in form of x,y,z,x1,y1

        var csData = crossfilter(data);

        // scatterplot data
        csData.dimScatter = csData.dimension(function (d) {
            return [parseFloat(d.x1), parseFloat(d.y1)];
        });

        csData.byScatter = csData.dimScatter.group();

        csData.dimHistogram = csData.dimension(function (d) {
            return Math.floor(parseFloat(d.z) * 10) / 10;
        });

        csData.byHistogram = csData.dimHistogram.group();

        histogram1.onBrushed(function (selected) {
            csData.dimHistogram.filter(selected);
            update();
        });

        function update() {       
            d3.select("#scatterplot")
                .datum(csData.byScatter.all())
                .call(chart);

            d3.select("#histogram")
                .datum(csData.byHistogram.all())
                .call(histogram1);
        }    
        update();
    });

即使直方图被刷（selected显示我刷的数据），数据也不会被过滤。为什么会这样？

编辑1 - 添加了JSFiddle

编辑2 - chart的代码：

function scatterPlot() {

        var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 350,
            height = 350,
            innerWidth = width - margin.left - margin.right,
            innerHeight = height - margin.top - margin.bottom,
            xValue = function(d) { return d[0]; },
            yValue = function(d) { return d[1]; },
            xScale = d3.scaleLinear(),
            yScale = d3.scaleLinear();

        function chart(selection) {
            selection.each(function (data) {

                // Select the svg element, if it exists.
                var svg = d3.select(this).selectAll("svg").data([data]);

                // Otherwise, create the skeletal chart.
                var svgEnter = svg.enter().append("svg");
                var gEnter = svgEnter.append("g");
                gEnter.append("g").attr("class", "x axis");
                gEnter.append("g").attr("class", "y axis");

                // Update the outer dimensions.
                svg.merge(svgEnter).attr("width", width)
                    .attr("height", height);

                // Update the inner dimensions.
                var g = svg.merge(svgEnter).select("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


                xScale.rangeRound([0, innerWidth])
                //d3.max(data, function(d) { return d.x1; })
                    .domain([-1.5, 1.5]);
                yScale.rangeRound([innerHeight, 0])
                    .domain([-1.5, 1.5]);

                g.select(".x.axis")
                    .attr("transform", "translate(0," + innerHeight + ")")
                    .call(d3.axisBottom(xScale));

                g.select(".y.axis")
                    .call(d3.axisLeft(yScale).ticks(10))
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", "0.71em")
                    .attr("text-anchor", "end")
                    .text("Frequency");

                var points = g.selectAll(".point")
                    .data(function (d) { return d; });

                points.enter().append("circle")
                    .attr("class", "point")
                    .merge(points)
                    .attr("cx", X)
                    .attr("cy", Y)
                    .attr("r", 2.5);

                points.exit().remove();
            });

        }

        // The x-accessor for the path generator; xScale ∘ xValue.
        function X(d) {
            return xScale(xValue(d));
        }

        // The y-accessor for the path generator; yScale ∘ yValue.
        function Y(d) {
            return yScale(yValue(d));
        }

        chart.margin = function(_) {
            if (!arguments.length) return margin;
            margin = _;
            return chart;
        };

        chart.width = function(_) {
            if (!arguments.length) return width;
            width = _;
            return chart;
        };

        chart.height = function(_) {
            if (!arguments.length) return height;
            height = _;
            return chart;
        };

        chart.x = function(_) {
            if (!arguments.length) return xValue;
            xValue = _;
            return chart;
        };

        chart.y = function(_) {
            if (!arguments.length) return yValue;
            yValue = _;
            return chart;
        };

        return chart;
    }

编辑3：Running Fiddle

Answer 1

这是一个有效的更新小提琴：https://jsfiddle.net/yquuhs3z/15/

或多或少，您想要查看csData.byScatter.all()返回的数据。值得注意的是，没有记录的组不会消失，它们的最终值为0，因此您需要在绘制图表之前根据其值过滤掉您不想要的组。意味着取代

d3.select("#scatterplot")
                .datum(csData.byScatter.all())

与

d3.select("#scatterplot")
                .datum(csData.byScatter.all().filter(d => d.value !== 0))

该示例还包括使用console.log进行的一些日志记录，可能有助于您将来处理此类事情，尽管很多人更喜欢使用Javascript调试器进行此类操作。

为什么crossfilter.js在刷完后不会过滤其他视图？

1 个答案: