D3.js nvd3触发事件刷端

D3.js nvd3触发事件刷端,d3.js,nvd3.js,D3.js,Nvd3.js,我已经开始用nvd3创建一个图形,需要获取“brushend”事件。 我在这个话题上找到了以下信息: 以下代码适用于“brush”事件,但不适用于“brushend” var chart = nv.models.lineWithFocusChart(); chart.brushExtent([50,70]); chart.xAxis.tickFormat(d3.format(',f')); chart.x2Axis.tickFormat(d3.format(',f')); chart.

我已经开始用nvd3创建一个图形,需要获取“brushend”事件。 我在这个话题上找到了以下信息:

以下代码适用于“brush”事件,但不适用于“brushend”

var chart = nv.models.lineWithFocusChart();
chart.brushExtent([50,70]);

chart.xAxis.tickFormat(d3.format(',f'));
chart.x2Axis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.2f'));                    
chart.y2Axis.tickFormat(d3.format(',.2f'));
chart.useInteractiveGuideline(true);


chart.dispatch.on('brush', function(brush){ console.log(brush); } );
d3.select("#chart svg").datum(tmp).call(chart);

我通过向文件中添加一些行修复了此问题:

nv.models.lineChart=函数(){
“严格使用”;
var line=nv.models.line()
,xAxis=nv.models.axis()
,yAxis=nv.models.axis()
,legend=nv.models.legend()
,interactiveLayer=nv.interactiveGuideline()
,tooltip=nv.models.tooltip()
,lines2=nv.models.line()
,x2Axis=nv.models.axis()
,y2Axis=nv.models.axis()
,brush=d3.svg.brush()
;
var margin={顶部:30,右侧:20,底部:50,左侧:60}
,margin2={top:0,right:20,bottom:20,left:60}
,color=nv.utils.defaultColor()
,宽度=空
,高度=null
,showLegend=true
,showXAxis=true
,showYAxis=true
,rightAlignYAxis=false
,useInteractiveGuideline=false
,x
Y
,x2
,y2
,focusEnable=false
,focusShowAxisY=false
,focusShowAxisX=true
,焦距=50
,brushExtent=null
,state=nv.utils.state()
,defaultState=null
,noData=null
,dispatch=d3.dispatch('tooltipShow','tooltipHide','brush','stateChange','changeState','Rendernd','brushend')
,持续时间=250
;
//设置此图表的子对象上的选项
xAxis.orient('底部').tickPadding(7);
yAxis.orient(rightallineyaxis?'right':'left');
行。剪辑(真)。持续时间(0);
lines2.交互式(假);
//我们不希望焦点图的散点图中出现任何点。
lines2.pointActive(函数(d){return false;});
X2轴方向(“底部”)。填充(5);
y2Axis.orient(rightallineyaxis?'right':'left');
工具提示.valueFormatter(函数(d,i){
返回yAxis.tickFormat()(d,i);
}).头部执行器(功能(d,i){
返回xAxis.tickFormat()(d,i);
});
interactiveLayer.tooltip.valueFormatter(函数(d,i){
返回yAxis.tickFormat()(d,i);
}).头部执行器(功能(d,i){
返回xAxis.tickFormat()(d,i);
});
//============================================================
//私有变量
//------------------------------------------------------------
var renderWatch=nv.utils.renderWatch(调度,持续时间);
var stategatter=函数(数据){
返回函数(){
返回{
活动:data.map(函数(d){return!d.disabled;})
};
};
};
var stateSetter=函数(数据){
返回函数(状态){
如果(state.active!==未定义)
data.forEach(函数(系列,i){
series.disabled=!state.active[i];
});
};
};
功能图(选择){
renderWatch.reset();
renderWatch.模型(线);
renderWatch.模型(第2行);
if(showXAxis)renderWatch.models(xAxis);
if(showYAxis)渲染器模型(yAxis);
if(focusShowAxisX)renderWatch.models(x2Axis);
if(聚焦显示轴)渲染器模型(y2Axis);
选择。每个功能(数据){
var container=d3.选择(此);
nv.utils.initSVG(容器);
var availableWidth=nv.utils.availableWidth(宽度、容器、边距),
availableHeight t1=nv.utils.availableHeight(高度、容器、边距)-(可聚焦?聚焦高度:0),
可用高度2=焦点高度-边缘2.top-边缘2.bottom;
chart.update=函数(){
如果(持续时间==0){
容器.调用(图表);
}否则{
container.transition().duration(duration).call(chart);
}
};
chart.container=这个;
状态
.setter(stateSetter(数据),chart.update)
.getter(stateGetter(数据))
.update();
//已弃用的集合状态。已禁用
state.disabled=data.map(函数(d){return!!d.disabled;});
如果(!defaultState){
var键;
defaultState={};
用于(输入状态){
if(state[key]instanceof Array)
defaultState[key]=状态[key]。切片(0);
其他的
defaultState[key]=状态[key];
}
}
//如果没有要显示的内容,则显示noData消息。
if(!data | |!data.length | |!data.filter(函数(d){return d.values.length;}).length){
nv.utils.noData(图表、容器);
收益表;
}否则{
container.selectAll('.nv noData').remove();
}
//设置比例
x=lines.xScale();
y=lines.yScale();
x2=lines2.xScale();
y2=lines2.yScale();
//设置图表的容器和框架
var wrap=container.selectAll('g.nv-wrap.nv lineChart')。数据([data]);
var gEnter=wrap.enter().append('g').attr('class','nvd3 nv wrap nv lineChart').append('g');
var g=换行。选择('g');
gEnter.append('g').attr('class','nv legendWrap');
var focusEnter=gEnter.append('g').attr('class','nv focus');
focusEnter.append('g').attr('class','nv-background').append('rect');
focusEnter.append('g').attr('class','nv-x nv轴');
focusEnter.append('g').attr('class','nv-y nv轴');
focusEnter.append('g').attr('class','nv linesWrap');