Angular dc.js 过滤器问题答案

【问题标题】：Angular dc.js filter issueAngular dc.js 过滤器问题
【发布时间】：2015-08-16 22:54:06
【问题描述】：

我正在使用这个 angular addon 将 dc.js 图表与 Angular 一起使用。

我将这个example 与自定义行为一起使用，我添加了一个输入框以从输入框值中过滤运行值，角度正在捕捉变量变化，但 dc.js 没有相应地过滤。

这是我的自定义 html 和 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>

【问题讨论】：

标签： angularjs dc.js crossfilter

【解决方案1】：

您是否有权访问全局命名空间中的dc 对象？还是通过指令？我假设您需要致电 dc.redrawAll() (documented here)，因为 dc.js 图表/指令在您以某种方式通知他们之前不会知道您更改了 Crossfilter 上的过滤器。

【讨论】：

是的，我愿意：$scope.dc.redrawAll(); ，但作用不大。
.redrawAll("1") 因为你已经指定了dc-chart-group="1" ?