dc.js: dispose()和deregisterChart()的问题

Question

我正在创建一个可以动态添加和删除图表的应用程序。一切正常，但删除一个图表。

我遇到的问题是当我有一个折线图和一个条形图时发生的，其中一个是复合的，我删除了其中一个(处置维度并取消注册图表)。在这一点上，我没有处理的图表停止对其他图表的过滤器作出反应，并停止对自己的事件作出反应，即使其他图表被它们过滤了。此外，正如您在小提琴中看到的，我从dc中删除的折线图仍然对其他图表过滤器有反应。

我发现问题是在deregisterChart dc调用上，但由于我的应用程序可以创建和删除无限个图表，我需要一种方法从dc中删除我不再需要的图表，而不会破坏留下的图表。

这是代码:

resetFilter = function() {
  lineData.dispose()
  dc.deregisterChart(linechart);
}

for (var j = 0; j < axis.length; j++) {
    var dimData = __cfArray[dataId].dimension(function(d) {
      return d[axis[j].xaxis];
    });
    var barGroup = getGroup(dimData, axis[j].xaxis, axis[j].yaxis, operation, isDate);
    barCharts.push(dc.barChart(composite)
      .valueAccessor(accesor)
      .dimension(dimData)
      .group(barGroup, xAxisTitle[j])
      .transitionDuration(1000)
      .gap(gap)
      .colors(barColors[j])
      .centerBar(function() {
        if (axis.length > 1) return false;
        else return true;
      })
      .title(function(d) {
        if (operation === count) {
          if (isDate) return format(d.key) + ": " + d.value.count;
          else return d.key + ": " + d.value.count;
        } else {
          if (isDate) return format(d.key) + ": " + d.value.total;
          else return d.key + ": " + d.value.total;
        }
      })
    );

    lineData = __cfArray[dataId].dimension(function(d) {
      return d[axis[j].xaxis];
    });
    var lineGroup = getGroupLine(lineData, axis[j].xaxis, axis[j].yaxis, true, operation, isDate);
    linechart = dc.lineChart(lineDom)
      .dimension(lineData)
      .group(lineGroup, xAxisTitle[j] + "/" + yAxisTitle)
      .useRightYAxis(true)
      .colors(lineColors[j])
      .title(function(d) {
        if (operation === count) {
          if (isDate) return format(d.key) + ": " + d.valueCount;
          else return d.key + ": " + d.valueCount;
        } else {
          if (isDate) return format(d.key) + ": " + d.valueTotal;
          else return d.key + ": " + d.valueTotal;
        }
      })
      .valueAccessor(function(p) {
        if (operation === count) {
          return p.valueCount;
        } else {
          return p.valueTotal;
        }
      });
  }
  var xMine;

  var dom = [];
  for (var i = 0; i < axis.length; i++) {
    if (dom.length === 0) {
      dom = __dataArray[dataId].map(function(d) {
        return d[axis[i].xaxis]
      });
    } else {
      dom = dom.concat(__dataArray[dataId].map(function(d) {
        return d[axis[i].xaxis]
      }));
    }
  }
  if (isNaN(dom[0])) {
    xMine = d3.scale.ordinal().domain(dom.sort());
  } else {
    xMine = d3.scale.ordinal().domain(dom.sort(function(a, b) {
      return a - b;
    }));
  }
  composite.xUnits(dc.units.ordinal)
  linechart.xUnits(dc.units.ordinal)

  linechart.width(width)
    .height(height)
    .margins(margin)
    .x(xMine)
    .elasticY(true)
    .legend(dc.legend().x(80).y(10).itemHeight(13).gap(5))
    ._rangeBandPadding(1)
    .brushOn(false);
  composite.width(width)
    .height(height)
    .margins(margin)
    .x(xMine)
    .rightYAxisLabel(yAxisRightTitle)
    .elasticY(true)
    .legend(dc.legend().x(80).y(10).itemHeight(13).gap(5))
    ._rangeBandPadding(1)
    .brushOn(false)
    .shareTitle(false)
    .mouseZoomable(true)
    .yAxisPadding('10%')
    .compose(barCharts)
    .renderHorizontalGridLines(true);
  composite.yAxis().tickFormat(d3.format('s'));
  composite.rightYAxis().tickFormat(d3.format('s'));
  composite.render();
  linechart.render();

这是我用我的问题创建的提琴:https://jsfiddle.net/nofknndf/9/

谢谢!

Answer 1

这是一个复杂而复杂的系统，恭喜你。

我承认我没有弄清楚为什么你会看到现在的奇怪行为，但我确实发现了问题，我想我已经解决了。

在getGroupLine中，每次调用fake-group .all()方法时，实际上都在创建一个组:

    function getGroupLine(dimension, xaxis, yaxis, isCum, operation, isDate){
        return {
            all:function () {
        // ...
                var _group = dimension.group().reduce(reduceAdd, reduceRemove, reduceInitial).orderNatural();

这很容易很快让人困惑!我通过在调试器中进入dimension.dispose()来发现这一点，看看它是否正在工作-每次它运行时都有越来越多的组。

组存储在维度中，可以独立处理。

当函数被调用时，您想要创建"基组"_group，并且返回的假组将只获取_group.all():

    function getGroupLine(dimension, xaxis, yaxis, isCum, operation, isDate){
        var reduceAdd = function(p, v) {
            if (!(isDate && v[xaxis] === 0 )) {
                ++p.count;
                p.total += v[yaxis];
            }
            return p;
        }
        var reduceRemove = function(p, v) {
            if (!(isDate && v[xaxis] === 0 )) {
                --p.count;
                p.total -= v[yaxis];
            }
            return p;
        }
        var reduceInitial = function() {
            return {
                count: 0, 
                total: 0,
                elements: []
            };
        }
        var _group = dimension.group().reduce(reduceAdd, reduceRemove, reduceInitial).orderNatural();
        return {
            all:function () {
                var totalCount = 0;
                var total = 0;
                var g = [];

                _group.all().forEach(function(d,i) {
                    if(isCum){
                        totalCount += d.value.count;
                        total += d.value.total;
                    } else {
                        totalCount = d.value.count;
                        total = d.value.total;
                    }
                    g.push({key:d.key,valueTotal:total,valueCount:totalCount})
                });
                return g;
            }
        }; 
    }

这似乎解释了为什么折线图继续被过滤。

另一个问题是错误的图表被注销。这是因为你的每个图表都需要有自己独特的锚点(id)——在你的例子中，它们都被命名为"复合"。js在注销时依赖于比较锚名，所以如果两个图表都有相同的id，错误的一个将被删除。HTML要求id s是唯一的，因此您可能会遇到其他问题。

将折线图的id重命名为"line"修复了注销。

你的小提琴在这里更新分叉:https://jsfiddle.net/dnrxxjyo/4/