如何在 dc.js + crossfilter + d3.js 图表中捕获选择？

Question

也许答案很明显，与图书馆无关，但与一般 javascript、JQuery 或 Ajax 无关。我是 javascript 的新手，我正在尝试使用 flask 作为后端来实现一个仪表板。

Crossfilter 和 dc 帮助我 select 图表上的范围，看看它如何影响整个数据集。如果我添加：

<span class="filter"></span>

它将在图表上方显示范围

但这是跨度对象中的 class "filter"，而不是我可以在代码中获取的变量或数据。下面是我用来显示图表的（顺便说一句，重置按钮根本没有出现）

                <div class='span6' id='dc-close-chart'>
                <h4>
                    close
                </h4>
                <p>range:
                    <span class="filter">
                        <a class="reset" href="javascript:closeChart.filterAll();dc.redrawAll();" style="display: none;">
                            reset
                        </a>
                    </span>

                </p>

            </div>

我希望能够做到以下几点：

能够访问该范围并将其存储为一个变量，这样我就可以访问它，也许 post 使用提交按钮访问它。
能够替换输入文本框的标签以修改范围并相应地更改过滤器。

我一直在 crossfilter 和 dc.js 论坛上四处寻找，但我没有找到任何相关的东西，我想做什么，这可能吗？

在 JS 代码下方，我可以创建一个捕获它的变量吗？

var closeChart = dc.barChart("#dc-close-chart");

   // set constants
   var n_bins = 35;
   d3.csv("/static/data2.csv", function (data) {
   console.log(data);

   data.forEach(function (d) {

       d.close = d3.round(+d.close, 1);

   });

   // Run the data through crossfilter and load our 'facts'
   var facts = crossfilter(data);
   var all = facts.groupAll();

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



   // for Each chart numeric
   var closeValue = facts.dimension(function (d) {
       return d.close; // add the magnitude dimension
   });
   var closeValueGroupSum = closeValue.group()
       .reduceSum(function (d) {
           return d.close;
       }); // sums 
   var closeValueGroupCount = closeValue.group()
       .reduceCount(function (d) {
           return d.close;
       }) // counts 
   // extent
   var closeExtent = d3.extent(data, function (d) {
       return d.close;
   });
   // binwidth
   var closebinWidth = (closeExtent[1] - closeExtent[0]) / n_bins;
   //group
   var closeGroup = closeValue.group(function (d) {
       return Math.floor(d / closebinWidth) * closebinWidth;
   });
   // Setup the charts
   // Magnitide Bar Graph Counted
   closeChart.width(480)
       .height(150)
       .margins({
           top: 10,
           right: 10,
           bottom: 20,
           left: 40
       })
       .dimension(closeValue)
       .group(closeGroup)
       .transitionDuration(500)
       .centerBar(true)
       .gap(1) // 65 = norm
       //    .filter([3, 5])
       .x(d3.scale.linear().domain(closeExtent).range([0, n_bins]))
       .elasticY(true)
       .xUnits(function () {
           return n_bins;
       })
       .controlsUseVisibility(true)
       .colors(['LimeGreen'])
       .xAxis().tickFormat(function (v) {
           return v;
       });

   // Render the Charts
   dc.renderAll();

   });

Answer 1

您可以使用 chart.filter() or chart.filters() 阅读当前活动的过滤器。

没有任何内置的东西可以从文本中解析过滤器，但如果你知道如何做到这一点，你可以应用过滤器

chart.replaceFilter([dc.filters.RangedFilter(min, max)])

RangedFilter 文档。

replaceFilter 文档。

如何在 dc.js + crossfilter + d3.js 图表中捕获选择？

How to capture the selection in a dc.js + crossfilter + d3.js chart?

crossfilter

dc.js