d undefined for d3.tip() tooltip with dc.leafletChoroplethChart - dc.js

Question

I'm trying to use d3.tip() to create a popup window when mousing over a dc.leafletChoroplethChart. I'm really close, the problem is that d is undefined in the html call of the tooltip:
var tip = d3.tip()
.attr("class", "d3-tip")
.html(function(d) {
console.log("d:", d) //returns undefined
return d;
});
I put the above code just before the d3.json("geojson/file.json", function(states) loop.
Then in the loop:
drawChoropleth(csv,states);
choroChart = dc.leafletChoroplethChart("#choro-map .map")
.dimension(regionDimension)
.group(avgRegionGroup)
.valueAccessor(function(p) {
return p.value.average;
})
.width(600)
.height(400)
.center([47.00, 2.00])
.zoom(5)
.geojson(geojson)
.colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
.colorDomain(function() {
return [dc.utils.groupMin(this.group(), this.valueAccessor()),
dc.utils.groupMax(this.group(), this.valueAccessor())];
})
.colorAccessor(function(d,i) {
return d.value.average;
})
.featureKeyAccessor(function(feature) {
return feature.properties.name;
});
choroChart.renderlet(function(chart) {
chart.selectAll("path").call(tip);
chart.selectAll("path").on("mouseover", tip.show);
});
When mousing over, a popup window appears but it doesn't contain anything because d is undefined. Any idea how to get at the name of the regions?
Thank you!

Answer 1

The simplest solution to using d3-tip with leaflet is binding the data to the g elements after they're inserted a simple way to achieve this is:
_chart.map().on('layeradd', function(d){
if (!d.layer.feature) return;
d3.select(d.layer._container).datum(d.layer.feature);
});