NVD3 为饼图的单个切片创建点击事件
NVD3 Create click event for individual slice of a pie chart
我正在使用 NVD3 创建饼图。
生成饼图的代码:
nv.addGraph(function() {
var chart = nv.models.pieChart().x(function(d) { return d.label }).y(function(d) { return d.value }).showLabels(true);
d3.select("#chart svg").datum(exampleData()).transition().duration(350).call(chart);
return chart;
function exampleData() {
return vm.chartData.userData;
}
});
现在饼图中有两个部分,如图所示。
我用过下面的方法
1) 在方法上使用 js
var svg = d3.selectAll("#chart svg");
svg.select(".nv-pie").selectAll(".nv-slice")
.on('mouseover',function(d){
console.log(d);
});
但是没有点击事件发生。
不对的地方请指正
使用这个:
chart.pie.dispatch.on("elementClick", function(e) {
console.log(e);
});
演示
var chartElement = d3.select("#chart svg");
var chart;
nv.addGraph(function() {
chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true);
var chartData = [{
label: "Foo",
value: 67
}, {
label: "Bar",
value: 33
}];
chartElement
.datum(chartData)
.call(chart);
chart.pie.dispatch.on("elementClick", function(e) {
alert("You've clicked " + e.data.label);
});
return chart;
});
#chart {
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<div id="chart">
<svg></svg>
</div>
我认为这可能是一个简单的方法,我也遇到了同样的问题,所以经过一番搜索我得到了这个解决方案。需要为标签和饼图点击元素定义不同的 属性。
有关详细信息,请浏览图表:click here
legend : {
margin : {
top : 5,
right : 40,
bottom : 50,
left : 0
},
dispatch : {
legendClick : function(e) {
$rootScope.clickedLagend = e
//in case send it to another page
$location.path('/url');
$scope.$apply();
},
}
},
pie : {
dispatch : {
elementClick : function(e) {
$rootScope.clickedLagend = e
$location.path('/url');
$scope.$apply();
},
}
}
我正在使用 NVD3 创建饼图。 生成饼图的代码:
nv.addGraph(function() {
var chart = nv.models.pieChart().x(function(d) { return d.label }).y(function(d) { return d.value }).showLabels(true);
d3.select("#chart svg").datum(exampleData()).transition().duration(350).call(chart);
return chart;
function exampleData() {
return vm.chartData.userData;
}
});
现在饼图中有两个部分,如图所示。
我用过下面的方法 1) 在方法上使用 js
var svg = d3.selectAll("#chart svg");
svg.select(".nv-pie").selectAll(".nv-slice")
.on('mouseover',function(d){
console.log(d);
});
但是没有点击事件发生。
不对的地方请指正
使用这个:
chart.pie.dispatch.on("elementClick", function(e) {
console.log(e);
});
演示
var chartElement = d3.select("#chart svg");
var chart;
nv.addGraph(function() {
chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true);
var chartData = [{
label: "Foo",
value: 67
}, {
label: "Bar",
value: 33
}];
chartElement
.datum(chartData)
.call(chart);
chart.pie.dispatch.on("elementClick", function(e) {
alert("You've clicked " + e.data.label);
});
return chart;
});
#chart {
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<div id="chart">
<svg></svg>
</div>
我认为这可能是一个简单的方法,我也遇到了同样的问题,所以经过一番搜索我得到了这个解决方案。需要为标签和饼图点击元素定义不同的 属性。 有关详细信息,请浏览图表:click here
legend : {
margin : {
top : 5,
right : 40,
bottom : 50,
left : 0
},
dispatch : {
legendClick : function(e) {
$rootScope.clickedLagend = e
//in case send it to another page
$location.path('/url');
$scope.$apply();
},
}
},
pie : {
dispatch : {
elementClick : function(e) {
$rootScope.clickedLagend = e
$location.path('/url');
$scope.$apply();
},
}
}