如何在dc.js +交叉过滤器+ d3.js图表​​中捕获选择？

Question

答案可能非常明显，与库无关，但与常规javascript，JQuery或Ajax无关。我对javascript非常陌生，我试图使用flask作为后端来实现仪表板。

Crossfilter和dc可以帮助我在图表上选择范围，并查看它如何影响整个数据集。如果我添加：

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

它将在图表上方显示范围

但这是span对象中的“过滤器”类，而不是我可以在代码中获取的变量或数据。下面是我用来显示图表的方法（顺便说一句，重设按钮根本没有出现）

                <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>

我希望能够执行以下操作：

1. 能够访问该范围并存储它是一个变量，因此我可以访问它，也可以使用提交按钮将其发布。
2. 能够将该标签替换为输入文本框，以修改范围并相应地更改过滤器。

我一直在寻找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()或chart.filters()阅读当前活动的过滤器。

没有内置任何内容可以解析文本过滤器，但是如果您知道该怎么做，则可以使用以下过滤器

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

RangedFilter文档。

replaceFilter文档。