我有一个NVD3圆环图,我需要一个新功能,同时点击图例添加到显示/隐藏系列功能。任何人都可以帮助实现这一目标。但是我已经实现了下面演示中解释的附加功能。但默认的Legend Click功能已经消失。请帮帮我..谢谢。
nv.addGraph(function() {
var donutChart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true)
.showLegend(true)
.labelThreshold(.05)
.labelType("key")
.color(["#965251", "#00b3ca", "#7dd0b6", "#e38690", "#ead98b"])
.donut(true)
.donutRatio(0.35);
// Insert text into the center of the donut
function centerText() {
return function() {
var svg = d3.select("svg");
var donut = svg.selectAll("g.nv-slice").filter(
function (d, i) {
return i == 0;
}
);
// Insert first line of text into middle of donut pie chart
donut.insert("text", "g")
.text("Line One")
.attr("class", "middle")
.attr("text-anchor", "middle")
.attr("dy", "-.55em")
.style("fill", "#000");
// Insert second line of text into middle of donut pie chart
donut.insert("text", "g")
.text("Line Two")
.attr("class", "middle")
.attr("text-anchor", "middle")
.attr("dy", ".85em")
.style("fill", "#000");
}
}
// Put the donut pie chart together
d3.select("#donut-chart svg")
.datum(seedData())
.transition().duration(300)
.call(donutChart)
.call(centerText());
//.call(pieSlice());
d3.select("g.nv-legendWrap").selectAll("g.nv-series")
.on("click", function (d) {
console.log("One needs to be handled " + d.label);
})
return donutChart;
});
// Seed data to populate donut pie chart
function seedData() {
return [
{
"label": "One",
"value": 25
},
{
"label": "Two",
"value": 25
},
{
"label": "Three",
"value": 25
},
{
"label": "Four",
"value": 25
},
{
"label": "Five",
"value": 25
}
];
}

html, body, #donut-chart, .content{height:100%;width:100%;}
.content h1 {
font-weight: 300;
text-align: center;
}
svg {
width: 500px;
height: 500px;
margin: 0 auto;
text.middle {
font-family: Lato;
font-weight: 300;
font-size: 24px;
}
.nvd3.nv-pie .nv-pieLabels text {
font-family: Lato;
font-size: 18px;
font-weight: 300;
fill: #fff !important;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>
<div class="content">
<h1>NVD3 Donut Pie Chart</h1>
<div id="donut-chart">
<svg></svg>
</div>
</div>
&#13;
答案 0 :(得分:0)
更换,
179115.437 3.74438915e-12
带
d3.select("g.nv-legendWrap").selectAll("g.nv-series")
.on("click", function (d) {
console.log("One needs to be handled " + d.label);
})
工作..感谢altocumulus。