dc.js - 删除范围滑块过滤器上的旧图表和重绘图表

Question

我正在尝试使用范围滑块来过滤折线图。我把adjustable-threshold example作为参考。现在，滑块正在过滤数据，但每次移动滑块时，新图表会不断添加，但旧图表不会消失。

这是我的代码：

      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();
      });

    });

这是一个相同的fiddle。我该如何解决？

我的计划是将多个滑块作为多个图表的过滤器。

我见过example with use of two sliders。它使用d3.slider.js。但是我没有为DC v3.0.6和D3 v5找到这个库的兼容版本。

对于实现多个滑块作为多个图表的过滤器的任何其他方法的建议是受欢迎的。

提前致谢。

Answer 1

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

作为奖励，更改数据而不是替换图表会导致图表从一个数据动画到下一个数据。

Fork of your fiddle。