Javascript nvd3图表类型错误:tickExit.call不是函数
我正在使用nvd3.js显示角度项目中的图表。 我创建了以下指令:Javascript nvd3图表类型错误:tickExit.call不是函数,javascript,angularjs,nvd3.js,Javascript,Angularjs,Nvd3.js,我正在使用nvd3.js显示角度项目中的图表。 我创建了以下指令: .directive('lineChart', function($window) { return { restrict: 'E', scope: { // Bind the data to the directive scope. data: '=', // Allow the user to change the dimensions of the chart.
.directive('lineChart', function($window) {
return {
restrict: 'E',
scope: {
// Bind the data to the directive scope.
data: '=',
// Allow the user to change the dimensions of the chart.
height: '@',
width: '@'
},
// The svg element is needed by D3.
template: '<svg ng-attr-height="{{ height }}" ng-attr-width="{{ width }}"></svg>',
link: function(scope, element) {
var d3 = $window.d3;
var nv = $window.nv;
var svg = element.find('svg'),
chart;
// This function is called when the data is changed.
var update = function() {
d3.select(svg[0])
.datum(scope.data)
.call(chart);
};
// Render the chart every time the data changes.
// The data is serialized in order to easily check for changes.
scope.$watch(function() { return angular.toJson(scope.data); }, function() {
// The chart may not have been initialized at this point so we need
// to account for that.
if (chart) {
update();
}
});
// The chart can not be rendered at once, since the chart
// creation is asynchronous.
scope.$on('chartinit', update);
nv.addGraph(function() {
chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
//We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
.x(function(d,i) { return i; })
.y(function(d,i) {return d[1]; })
;
chart.xAxis.tickFormat(function(d) {
var dx = scope.data[0].values[d] && scope.data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx));
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d); });
chart.bars.forceY([0]);
scope.$emit('chartinit');
return chart;
});
}
};
});
指令('lineChart',函数($window){
返回{
限制:'E',
范围:{
//将数据绑定到指令范围。
数据:'=',
//允许用户更改图表的尺寸。
高度:“@”,
宽度:'@'
},
//D3需要svg元素。
模板:“”,
链接:功能(范围、元素){
变量d3=$window.d3;
var nv=$window.nv;
var svg=element.find('svg'),
图表;
//此函数在数据更改时调用。
var update=函数(){
d3.选择(svg[0])
.基准(范围.数据)
.电话(图表);
};
//每次数据更改时都呈现图表。
//数据被序列化,以便轻松检查更改。
scope.$watch(function(){return angular.toJson(scope.data);},function(){
//此时图表可能尚未初始化,因此我们需要
//要解释这一点。
如果(图表){
更新();
}
});
//无法立即呈现该图表,因为该图表
//创建是异步的。
范围:$on('chartinit',更新);
nv.addGraph(函数(){
chart=nv.models.linePlusBarChart()
.margin({顶部:30,右侧:60,底部:50,左侧:70})
//我们可以将x数据访问器设置为使用索引。原因?因此,所有条都显示为等距排列。
.x(函数(d,i){返回i;})
.y(函数(d,i){返回d[1];})
;
chart.xAxis.tickFormat(函数(d){
var dx=scope.data[0]。值[d]和&scope.data[0]。值[d][0]|0;
返回d3.time.format(“%x”)(新日期(dx));
});
图表1轴
.tickFormat(d3.format(',f'));
图表2轴
.tickFormat(函数(d){return'$'+d3.format(',f')(d);});
图.条.力([0]);
范围$emit('chartinit');
收益表;
});
}
};
});
这会引发以下错误:
TypeError:tickExit.call不是函数
在SVGGElement。(d3.js:8673)
在d3.js:8561
在d3处选择每个(d3.js:890)
at Array.d3_transitionPrototype.each(d3.js:8559)
在Array.axis(d3.js:8643)
at Array.d3_selectionPrototype.call(d3.js:897)
在SVGGElement。(nv.d3.js:1086)
d3.js:884
在d3处选择每个(d3.js:890)
at Array.d3_selectionPrototype.each(d3.js:883)
我之前发现隐藏轴解决了问题,但我需要显示它们。我自己回答,因为我找到了适用于d3.js的修复程序 在函数d3.svg.axis中,我更改了
tickExit = d3.transition(tick.exit()).style("opacity", ε).remove()
到
不确定为什么这个错误没有在更多的地方出现。我自己回答,因为我找到了适用于d3.js的修复程序 在函数d3.svg.axis中,我更改了
tickExit = d3.transition(tick.exit()).style("opacity", ε).remove()
到
不确定为什么这个错误没有在更多的地方出现。您使用的是哪一版本的d3和nvd3?我使用的版本是d3 3.4.13和nvd3 1.1.15-Beta在阅读您的评论后,我检查并发现我没有使用最新版本。我现在已经安装了d3 3.5.14和nvd3 1.8.2,但问题仍然存在……您使用的是d3和nvd3的哪个版本?我使用的版本是d3 3.4.13和nvd3 1.1.15-beta在阅读您的评论后,我检查并发现我没有使用最新版本。我现在已经安装了D33.5.14和NVD31.8.2,但问题仍然存在。。。