dc.js - удалить старую диаграмму и перерисовать диаграмму на фильтре слайдера диапазона - PullRequest
Новая
       23

dc.js - удалить старую диаграмму и перерисовать диаграмму на фильтре слайдера диапазона

0 голосов
/ 31 августа 2018

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

Это мой код: 

      var ndx = crossfilter(data);

      var dummy = ndx.dimension(function(d) {
        return [+d.xAxis, d.some_no];
      });

      var speed = ndx.dimension(function(d) {
        return +d.xAxis;
      });
      var speedGrp = speed.group().reduce(
        function(p, v) {
          p.yOne = p.yOne + +v.yOne;
          p.yTwo = p.yTwo + +v.yTwo;
          return p;
        },
        function(p, v) {
          p.yOne = p.yOne - +v.yOne;
          p.yTwo = p.yTwo - +v.yTwo;
          return p;
        },
        function() {
          return {
            yOne: 0,
            yTwo: 0
          };
        });

      function coreCount_from_threshold() {
        var scoreThreshold = document.getElementById('slideRange').value;
        scoreThreshold = parseFloat(scoreThreshold);
        if (isNaN(scoreThreshold)) {
          scoreThreshold = 10
        }
        return ndx.dimension(function(d) {
          var maxNumber = 16;
          if ((+d.xAxis > scoreThreshold) && (+d.xAxis < maxNumber)) {
            return +d.xAxis;
          } else {
            return null;
          }
        });
      }
      var coreCount = coreCount_from_threshold();
      var coreCountGroup = coreCount.group().reduce(
        function(p, v) {
          p.yOne = p.yOne + +v.yOne;
          p.yTwo = p.yTwo + +v.yTwo;
          return p;
        },
        function(p, v) {
          p.yOne = p.yOne - +v.yOne;
          p.yTwo = p.yTwo - +v.yTwo;
          return p;
        },
        function() {
          return {
            yOne: 0,
            yTwo: 0
          };
        });



      chart
        .width(500)
        .height(300)
        .margins({
          top: 20,
          left: 40,
          right: 20,
          bottom: 60
        })
        .x(d3.scaleLinear().domain([0, 17]))
        //.legend(dc.legend().x(60).y(20).itemHeight(13).gap(5))
        .renderHorizontalGridLines(true)
        .elasticX(true)
        .elasticY(true)
        .compose([
          dc.lineChart(chart)
          .dimension(coreCount)
          .colors('green')
          .group(coreCountGroup)
          .valueAccessor(function(d) {
            return d.value.yOne;
          })
          .curve(d3.curveLinear)
          .dashStyle([5, 5]),
          dc.lineChart(chart)
          .dimension(coreCount)
          .colors('#FA8072')
          .group(coreCountGroup)
          .valueAccessor(function(d) {
            return d.value.yTwo;
          })
          .renderArea(true)
          .curve(d3.curveLinear)

          // .useRightYAxis(true)
        ])
        .brushOn(false);

      dc.renderAll();
      $('#slideRange').change(function(slideValue) {
        var sliderDiv = document.getElementById("sliderValue");
        sliderDiv.innerHTML = slideValue;
        console.log(sliderDiv.innerHTML);
        coreCount.dispose();
        // coreCountGroup.dispose();
        coreCount = coreCount_from_threshold();
        coreCountGroup = coreCount.group().reduce(
          function(p, v) {
            p.yOne = p.yOne + +v.yOne;
            p.yTwo = p.yTwo + +v.yTwo;
            return p;
          },
          function(p, v) {
            p.yOne = p.yOne - +v.yOne;
            p.yTwo = p.yTwo - +v.yTwo;
            return p;
          },
          function() {
            return {
              yOne: 0,
              yTwo: 0
            };
          });
        chart
          .dimension(coreCount)
          .group(coreCountGroup)
          .compose([
            dc.lineChart(chart)
            .dimension(coreCount)
            .group(coreCountGroup)
            .valueAccessor(function(d) {
              return d.value.yOne;
            }),
            dc.lineChart(chart)
            .dimension(coreCount)
            .group(coreCountGroup)
            .valueAccessor(function(d) {
              return d.value.yTwo;
            })

          ]);
        dc.redrawAll();
      });

    });

Вот скрипка для того же. Как мне это исправить?

Мой план - использовать несколько ползунков в качестве фильтров для нескольких графиков.

Я видел пример с использованием двух ползунков . Он использует d3.slider.js . Но я не нашел совместимой версии этой библиотеки для DC v3.0.6 и D3 v5.

Приветствуются любые другие подходы к реализации нескольких ползунков в качестве фильтров для нескольких графиков.

Заранее спасибо.

1 Ответ

0 голосов
/ 03 сентября 2018

У compositeChart нет хороших способов удалить или заменить дочерние диаграммы. Похоже, что то, что происходит в вашей скрипке, это то, что она добавляет новые дочерние диаграммы, но теряет след старых.

Вместо того, чтобы пытаться заменить их, я бы предложил просто ввести новые данные в существующие дочерние диаграммы.

Во-первых, сохраните ссылку на каждую из дочерних диаграмм: 

      var oneLine, twoLine;
      chart
        // ...
        .compose([
          oneLine = dc.lineChart(chart)
          .dimension(coreCount)
          // ...
          .dashStyle([5, 5]),
          twoLine = dc.lineChart(chart)
          // ...
        ]);

Затем при каждом изменении ползунка заменяйте измерение и группу дочерней диаграммы вместо вызова compose каждый раз: 

        oneLine
          .dimension(coreCount)
          .group(coreCountGroup);
        twoLine
          .dimension(coreCount)
          .group(coreCountGroup);

В качестве бонуса, изменение данных вместо замены диаграммы приводит к тому, что диаграммы анимируются от одного к другому.

Вилка вашей скрипки .

...