dc.js : dispose() 및 deregisterChart() 문제

Question

차트를 동적으로 추가 및 제거 할 수있는 응용 프로그램을 만들고 있습니다. 모든 것은 잘 작동하지만 차트를 삭제합니다.

꺾은 선형 차트와 막대 차트 중 하나가 복합 요소 일 때 문제가 발생하고 그 중 하나를 삭제합니다 (차원을 삭제하고 차트 등록 취소). 이 시점에서 내가 처리하지 않은 차트는 다른 차트의 필터에 반응을 멈추고 자체 이벤트에 반응을 멈추더라도 다른 차트가 필터로 필터링되었다고 생각했습니다. 또한 바이올린에서 볼 수 있듯이 DC에서 제거한 선형 차트는 다른 차트 필터에도 계속 반응합니다.

나는이 문제가 deregisterChart dc 호출에 있다는 것을 알았지 만, 내 응용 프로그램이 무한대 차트를 만들고 삭제할 수 있기 때문에 뒤에 남겨진 것들을 깨지 않고 직류에서 제거 할 방법이 필요하다. https://jsfiddle.net/nofknndf/9/

감사 :

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

이것은 내가 내 문제로 만든 바이올린은 다음과 같습니다

이 코드입니다!

Answer 1

이것은 복잡하고 정교한 시스템입니다. 축하합니다.

나는 왜 당신이 현재 이상한 행동을하고 있는지를 알 수 없을 것이다. 그러나 나는 그 문제를 발견하고 그것을 고쳤다 고 생각한다. getGroupLine에서

, 당신은 실제로 가짜 그룹 .all() 메소드가 호출 그룹마다 하나의 시간을 만드는 : 꽤 빠른 혼란을 얻을 쉽다

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

! 디버거에서 dimension.dispose()으로 이동하여 작동하는지 확인하고 발견 할 때마다 점점 더 많은 그룹이 발견되었습니다.

그룹은 차원에 저장되며 독립적으로 처리 할 수 ​​있습니다.

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

이 라인 차트를 필터링 할 계속 이유를 설명하는 것 같다

당신은 함수가 호출 될 때 "기본 그룹"_group을 만들려면, 반환 가짜 그룹이 단지 _group.all()를 가져옵니다

.

다른 문제는 잘못된 차트가 등록 취소되는 것입니다. 이는 각 차트에 고유 한 앵커 (id)가 있어야하기 때문입니다. 예를 들어, 둘 다 "복합"으로 명명되었습니다. dc.js는 등록 취소시 앵커 이름을 비교하므로 두 차트가 모두 id 인 경우 잘못된 앵커가 제거됩니다. HTML에서는 id이 고유해야하므로 다른 문제가 발생할 가능성이 큽니다.

꺾은 선형 차트의 id의 이름을 "줄"으로 변경하면 등록이 수정됩니다.

여기 바이올린의

업데이트 포크 : https://jsfiddle.net/dnrxxjyo/4/