Angular dc.js filter issue

问题

I'm using this angular addon for using dc.js charts with Angular.

I'm using this example with a custom behavior, I added an input box in order to filter the Run value from the inputbox value, angular is catching the variable change but dc.js doesn't filter accordingly.

here is my custom html and js:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Pie Chart Example</title>
    <meta charset="UTF-8">
    	<link rel="stylesheet" type="text/css" href="//dc-js.github.io/dc.js/css/dc.css"/>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
	<script type="text/javascript" src="//dc-js.github.io/dc.js/js/dc.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
	<script type="text/javascript" src="/angular-dc/dist/angular-dc.min.js"></script>
</head>
<body ng-app="app">
<!-- we nicely separate the view and the data. Here, all information concerning the way to display the data
is in the template -->
    

<div ng-controller="myController" dc-chart="pieChart" dc-chart-group="1"
     dc-width="780" dc-height="480" dc-inner-radius="100"
     dc-slices-cap="4"
     dc-dimension="runDimension" dc-group="speedSumGroup"
     dc-legend="dc.legend()">
    <input name="calypso" ng-model="calypso">
    <p>{{calypso}}</p>
    </div>

<script type="text/javascript">
var myApp = angular.module("app", ["angularDc"]);

myApp.controller('myController', ['$scope', function ($scope, Data) {
    $scope.Data = Data;
    d3.csv("morley.csv", function(error, experiments) {
        var ndx = $scope.ndx = crossfilter(experiments)
        $scope.runDimension  = ndx.dimension(function(d) {return d.Run;})
        $scope.speedSumGroup = $scope.runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});
		// for simplicity we use d3.csv, but normally, we should use $http in order for this
		// to be called in the $digest
        //$scope.$apply()
        $scope.$watch('calypso', function() {
           console.log(parseInt($scope.calypso,10));
           $scope.runDimension.filter(parseInt($scope.calypso,10));
       });
       $scope.$apply();
    });
    
    
      
}]);
</script>

</body>
</html>

回答1:

Do you have access to the dc object in the global namespace? Or via a directive? I'm assuming you need to call dc.redrawAll() (documented here) as the dc.js charts/directives won't be aware that you changed the filter on your Crossfilter until you notify them somehow.

来源：https://stackoverflow.com/questions/32034746/angular-dc-js-filter-issue

标签

angularjs

dc.js

crossfilter