我正在使用nvd3.js并尝试添加一个单击事件
d3.selectAll(".nv-bar").on('click', function () {console.log("test");});
我该怎么做呢?
发布于 2013-07-18 06:26:37
我遇到了同样的问题,因为缺乏文档,我打算把所有的NVD3都扔在一起……您需要做的是向addGraph()添加一个回调函数。还要注意d3.selectAll()而不是d3.select()。
祝好运。
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 5, right: 5, bottom: 5, left: 5})
.showValues(false)
.tooltips(true)
.showControls(false);
chart.yAxis
.tickFormat(d3.format('d'));
d3.select('#social-graph svg')
.datum([data])
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
},function(){
d3.selectAll(".nv-bar").on('click',
function(){
console.log("test");
});
});
发布于 2013-12-13 21:38:32
我刚刚发现这也是有效的(至少对多条形图是这样的):
chart.multibar.dispatch.on("elementClick", function(e) {
console.log(e);
});
我必须查看src/multibar.js中的源代码才能找到答案;因为它在那里,所以我猜这就是它想要的方式。然而,我赞同Alex在他的回答中所说的:缺乏NVD3的文档确实是一个很大的缺点。这是可悲的,因为这个项目的总体想法很棒:给了我们D3的力量,而不涉及所有的细节……
发布于 2016-04-28 04:10:18
这里有三个关键点。
1)没有文档,意味着你必须看一遍源代码。
2)所有的图都有一个工具提示,这意味着事件已经在源代码中触发。
3)使用配置对象(文档中)作为源代码的路线图。
即。
var config = {chart: {type: 'multiChart',xAxis:{},yAxis{}}
打开nvd3/nv.d3.js文件
CTRL+F+图表类型。在本例中,它是“multiChart”。
您将看到nv.models.multiChart。
向下滚动以查找工具提示事件,您将找到所需的文档。
lines1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
stack1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
bars1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
因此,要编写自己的事件...
var config = {chart: {type: 'multiChart',
bars1: {
dispatch:{
elementClick:function(e){//do Stuff}
},
xAxis:{},yAxis{}
}
https://stackoverflow.com/questions/17598694
复制相似问题