角dc.js过滤器问题 [英] Angular dc.js filter issue
本文介绍了角dc.js过滤器问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用这个角插件使用dc.js图表与棱角分明。
我使用这个例如使用自定义行为的，我为了过滤来自输入框值运行增值的输入框，棱角分明正赶上变量的变化，但dc.js没有相应的过滤。
这是我的自定义HTML和JS：
\r
\r\r
\r＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML LANG =ENGT＆;\r
＆LT; HEAD＆GT;\r
＆LT;标题＆GT; dc.js - 饼图例＆LT; /标题＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =// dc-js.github.io/dc.js/css/dc.css\"/>\r
＆LT;脚本类型=文/ JavaScript的SRC =// cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =// cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =// cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =// dc-js.github.io/dc.js/js/dc.js\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =// cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =/角DC /距离/角dc.min.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=应用程序＆GT;\r
＆LT;！ - 我们很好地分开视图和数据。这里，关于这样的所有信息，以显示数据\r
是在模板 - ＆GT;\r
\r
\r
＆所述;股利纳克控制器=myController的直流图表=饼图直流图表基团=1\r
直流宽=780直流高度=480直流内半径=100\r
直流切片帽=4\r
直流尺寸=runDimension直流组=speedSumGroup\r
DC-传奇=dc.legend（）＆GT;\r
＆LT;输入名称=卡里普索NG模型=卡里普索＆GT;\r
＆所述p为H.; {{卡里普索}}＆下; / P＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本类型=文/ JavaScript的＆GT;\r
VAR对myApp = angular.module（应用程序，[angularDc]）;\r
\r
myApp.controller（'myController的'，['$范围'，函数（$范围，数据）{\r
$ scope.Data =数据;\r
d3.csv（morley.csv功能（错误，实验）{\r
VAR NDX = $ scope.ndx = crossfilter（实验）\r
$ scope.runDimension = ndx.dimension（功能（D）{返回d.Run;}）\r
$ scope.speedSumGroup = $ scope.runDimension.group（）reduceSum（函数（D）{返回d.Speed * d.Run;}）;\r
//为简单起见，我们使用d3.csv，但通常情况下，我们应该按顺序使用$ HTTP此\r
//在$摘要被称为\r
// $范围。$适用（）\r
$范围。$腕表（'卡里普索'，函数（）{\r
的console.log（parseInt函数（$ scope.calypso，10））;\r
$ scope.runDimension.filter（parseInt函数（$ scope.calypso，10））;\r
}）;\r
$ $范围适用于（）。\r
}）;\r
\r
\r
\r
}]）;\r
＆LT; / SCRIPT＆GT;\r
\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
解决方案
你有机会获得 DC 对象在全局命名空间？或者通过指令？我假设你需要调用 dc.redrawAll（）（这里记录）作为dc.js图表/指令不会知道你改变了过滤器上的Crossfilter，直到你不知何故通知他们。
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>
解决方案
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.
这篇关于角dc.js过滤器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
