如何在nvd3.js图上添加点击事件
如何在nvd3.js图上添加点击事件
提问于 2013-07-12 00:26:00
我正在使用nvd3.js并尝试添加一个单击事件
d3.selectAll(".nv-bar").on('click', function () {console.log("test");});我该怎么做呢？
回答 9
Stack Overflow用户
回答已采纳
发布于 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");
});
});Stack Overflow用户
发布于 2013-12-13 21:38:32
我刚刚发现这也是有效的(至少对多条形图是这样的)：
chart.multibar.dispatch.on("elementClick", function(e) {
console.log(e);
});我必须查看src/multibar.js中的源代码才能找到答案；因为它在那里，所以我猜这就是它想要的方式。然而，我赞同Alex在他的回答中所说的:缺乏NVD3的文档确实是一个很大的缺点。这是可悲的，因为这个项目的总体想法很棒:给了我们D3的力量，而不涉及所有的细节……
Stack Overflow用户
发布于 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{}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17598694
复制相关文章
相似问题