Change title dynamically in ndv3 pie chart - d3.js

Question

I am building a pie-chart with nvd3 and cannot figure out how to make the title dynamic or at least to run a callback when a user hovers over a slice of the pie.
This is the relevant part of my code:
nv.addGraph(function () {
let chart : any = nv.models.pieChart()
.x(function (d : any) {
return d.label;
})
.y(function (d : any) {
return d.value;
})
.showLabels(false)
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(0.6) //Configure how big you want the donut hole size to be.
.showLegend(false)
.color(function (d : any) {
return d.data.color;
})
.width(300)
.height(300)
.title("Hello");
//.on("mouseover", function(d: any) { console.log(d); });
d3.select("#chart svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
The chart works exactly as intended otherwise.
This is a codepen with the chart. For some reason the color does not work but in my own site it works.

Answer 1

You can use dispatch method of NVD3 library for event subscribing and of course, you can use any native d3 methods, for example d3.select. Just add this to your code:
chart.pie.dispatch.on('elementMouseover', function(e) {
d3.select('.nv-pie-title').text(e.label);
});
chart.pie.dispatch.on('elementMouseout', function(e) {
d3.select('.nv-pie-title').text("Hello");
});
Check working demo in the hidden snippet below:
nv.addGraph(function() {
let chart = nv.models.pieChart()
.x(function(d) {
return d.label;
})
.y(function(d) {
return d.value;
})
.showLabels(false)
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(0.6) //Configure how big you want the donut hole size to be.
.showLegend(false)
.color(function(d) {
return d.data.color;
})
.width(300)
.height(300)
.title("Hello");
//.on("mouseover", function(d: any) { console.log(d); });
chart.pie.dispatch.on('elementMouseover', function(e) {
d3.select('.nv-pie-title').text(e.label);
});
chart.pie.dispatch.on('elementMouseout', function(e) {
d3.select('.nv-pie-title').text("Hello");
});
d3.select("#chart svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
function exampleData() {
return [{
label: "timeout",
value: "14.2",
data: {
"color": "#f00"
}
}, {
label: "uncontacted",
value: "78.8",
data: {
"color": "#999999"
}
}, {
label: "refused",
value: "6.9",
data: {
"color": "#FFFFFF"
}
}];
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
<div id="chart">
<svg style="height: 300px; margin: -20px 0;"></svg>
</div>