Question

我有一个从数据源创建的直方图。

this.histogramDataSource = d3.layout.histogram()
    .value (function(d) { return d.score; })
    .bins(binThresholds)
(self.datasource);

我这样渲染

histogramRects = histogramGroup.selectAll('.svg_container rect')
    .data(histogram.histogramDataSource)
    .enter().append("rect")
    .attr({
        x:      function(d) { return histogram.x(d);       },
        width:  function(d) { return histogram.width(d);   },
        y:      function(d) { return histogram.y(d);       },
        height: function(d) { return histogram.height(d);  }
    })
    .attr("fill",  function(d) { return scarpa.ConnectivityScoreHistogram.fillColor(); });

根据用户输入，我想过滤输入数据源，重新计算直方图并重新渲染。我以为我可以做这样的事情：

this.histogramDataSource(filtered_data_source);

但这会产生错误。我在这里错过了什么？

Answer 1

我认为您需要保留对原始直方图构建器的引用：

this.histogramLayout = d3.layout.histogram()
    .value (function(d) { return d.score; })
    .bins(binThresholds);

this.histogramDataSource = this.histogramLayout(self.datasource);

然后

this.histogramDataSource = this.histogramLayout(filtered_data_source);

但是，请记住，这是从头开始重新计算整个直方图，因此对于稍微大一些的数据集可能会有点慢。如果您真的想要交互式过滤，可能需要查看Crossfilter。

D3。直方图布局。如何动态重新计算直方图？

1 个答案: