如何select点击nvd3饼图中的标签名称
How to select the label name on click in nvd3 pie chart
这是我用nvd3制作的饼图。
我在找什么:
是当我单击任何切片时,例如蓝色切片 "neutral",我需要在控制台中获取标签值(此处蓝色切片为 "neutral")。
这是我的代码。
function pieChart(pieData) {
$(".dataContentAllPie").empty();
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.color([
'#5EA9DD', '#008000','#ff0000','#bc5e03'
])
.showLabels(true)
.labelThreshold(.05)
.labelType("percent")
.donut(true)
.donutRatio(0.35)
;
d3.select("#chartSenti svg")
.datum(pieData)
.transition().duration(350)
.call(chart);
d3.selectAll('.nv-slice')
.on('click', function(){
console.log('hello - ', this.hasClass("nv-label")[0].textContent);
});
return chart;
});
};
这是我在控制台中遇到的错误:
"this.hasClass is not a function"
谁能帮我解决这个问题?
你走对了。只需将参数传递给事件侦听器并适当地获取数据。
d3.selectAll('.nv-slice')
.on('click', function(d) {
console.log(d.data.label);
});
这是我用nvd3制作的饼图。
我在找什么: 是当我单击任何切片时,例如蓝色切片 "neutral",我需要在控制台中获取标签值(此处蓝色切片为 "neutral")。
这是我的代码。
function pieChart(pieData) {
$(".dataContentAllPie").empty();
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.color([
'#5EA9DD', '#008000','#ff0000','#bc5e03'
])
.showLabels(true)
.labelThreshold(.05)
.labelType("percent")
.donut(true)
.donutRatio(0.35)
;
d3.select("#chartSenti svg")
.datum(pieData)
.transition().duration(350)
.call(chart);
d3.selectAll('.nv-slice')
.on('click', function(){
console.log('hello - ', this.hasClass("nv-label")[0].textContent);
});
return chart;
});
};
这是我在控制台中遇到的错误: "this.hasClass is not a function"
谁能帮我解决这个问题?
你走对了。只需将参数传递给事件侦听器并适当地获取数据。
d3.selectAll('.nv-slice')
.on('click', function(d) {
console.log(d.data.label);
});