crossfilter.js與dc.js更新回調組更改圖表

Question

我有一個工廠用於創建dc.js圖表​​，它使用交叉過濾函數綁定到$ scope。 Plnkr Example

$scope.updateMyPie = function(data) { 
    var cf = crossfilter(data) 
    $scope.mypie.dimension = cf.dimension(function(d) { return d.key }) 
    $scope.mypie.group = 
    $scope.mypie.dimension.group().reduceSum(function(d){ return d.value }); 
} 

圖表工廠經由角指令通過DOM通吃圖表屬性，以便標籤是像這樣

<mypie id="mypie" chart-dimesion="mypie.dimension" chart-group="mypie.group"...etc 

這種方法工作得很好濾波，初始數據加載，綁定和圖表繪製等....但是這是一個例外。如果我有類似點擊按鈕的事件觸發新的數據請求，然後我使用上述作爲回調並處理數據的罰款，但不更新圖表。即使我包含dc.redrawAll（）或renderAll（）等。

我試過嵌入redraw（），redrawAll（），驗證數據是否正確回來，完全破壞標籤並重新創建和追加到DOM等等。我的假設是使用這種工廠方式創建DC/D3圖表時出現問題，但是我會假設如果我更新了範圍內的組和/或維度，它應該仍然有效？看起來好像圖表對象不會接受對dim/groups的更改？我可以驗證由$ scope.etc引用的CF組值已經通過改變兩個初始呼叫和第二個呼叫如下：

var print_filter = function(filter) { 
    var f = eval(filter); 
    if (typeof (f.top) != "undefined") { 
     f = f.top(Infinity); 
    } 
    if (typeof (f.dimension) != "undefined") { 
     f = f.dimension(function (d) { 
      return ""; 
     }).top(Infinity); 
    } 

    console.log(filter + "(" + f.length + ") = " + JSON.stringify(f).replace("[", "[\n\t").replace(/}\,/g, "},\n\t").replace("]", "\n]")); 
}; 

更新：加入plnkr，並試圖更好地解釋=所以用這個例子我有一種「傳統」的方式來構建直流圖，而不是基於服務的方法，我嘗試使用指令和元素來實現。一切工作，除了我試圖在plnkr中顯示...當我要求新的數據（ajax）第一次更新罰款，基於指令的方法似乎沒有任何工作。我嘗試了很多方法，但實質上更新$範圍dim /組應該是正確的？我認爲這是雙向約束，因此這兩個「範圍」應該共享一個參考？但即使我使用範圍。$ parent.my.dimension等，它不會影響它。

Answer 1

您的圖表仍然與您的舊crossfilter，維度和組綁定。通常，當您加載新數據或替換數據時，請勿丟棄您的交叉過濾器，維度或組。使用crossfilter.remove和crossfilter.add方法添加或刪除數據。

下面是如何修改例如：

創建Crossfilter，尺寸和團體前面，當你創建你的控制器，則不要創建或銷燬任何更多的人在未來：

myapp.controller('mycontroller', ['$scope', 'dataCaller', function($scope, dataCaller){ 
     $scope.pageTitle = "Updating DC.js and Crossfilter"; 

     $scope.currentData1 = "data1.json"; 
     $scope.currentData2 = "data1.json"; 

     $scope.my = {}; 
     $scope.my.cf = crossfilter(); 
     $scope.my.dimension = $scope.my.cf.dimension(function(d){ return d.key; }) 
     $scope.my.group = $scope.my.dimension.group().reduceSum(function(d){ return d.value; }) 

然後改變你的更新功能只需切換出在Crossfilter數據：

$scope.factoryBuildPieExample = function(data) { 
    $scope.my.cf.remove() 
    $scope.my.cf.add(data.response.data) 
    dc.redrawAll(); 
    } 

如果你想保持你的dc.js過濾器，當你做到這一點，T他的提問/回答解釋瞭如何：Updating dc.js data and reapplying original filters

這裏是一個工作Plunker：http://plnkr.co/edit/UbfKsuhg9vH678MR6fQT?p=preview