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. It uses d3.slider.js。但是我还没有找到这个库的 DC v3.0.6 和 D3 v5 的兼容版本。

欢迎就实现多个滑块作为多个图表的过滤器的任何其他方法提出建议。

提前致谢。

Answer 1

compositeChart 没有删除或替换子图表的好方法。看起来您的 fiddle 中发生的事情是它添加了新的子图表但失去了对旧图表的跟踪。

与其尝试替换它们，不如将新数据提供给现有的子图表。

首先，保留对每个子图表的引用：

      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.

dc.js - 删除旧图表并在范围滑块过滤器上重新绘制图表

dc.js - Remove the old chart and redraw chart on range slider filter

d3.js

linechart

crossfilter

rangeslider