Как зафиксировать выделение на графике dc.js + crossfilter + d3.js? - PullRequest
Новая
       30

Как зафиксировать выделение на графике dc.js + crossfilter + d3.js?

0 голосов
/ 05 марта 2019

возможно, ответ очень очевиден и не имеет ничего общего с библиотеками, кроме общего javascript, JQuery или Ajax.Я очень новичок в javascript, и я пытался реализовать панель инструментов, используя колбу в качестве внутреннего интерфейса.

Crossfilter и dc помогают мне выбирать диапазоны на графиках и видеть, как это влияет на весь набор данных.Если я добавлю: 

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

Он отобразит диапазон над графиком

enter image description here

Но это класс "фильтр""внутри объекта 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();

   });

1 Ответ

0 голосов
/ 08 марта 2019

Вы можете прочитать текущие активные фильтры, используя chart.filter () или chart.filters () .

Нет ничего встроенного для анализаФильтры из текста, но если вы поймете, как это сделать, вы можете применить фильтр с 

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

RangedFilter docs.

replaceFilter документы.

...