d未定义d3.tip()工具提示与dc.leafletChoroplethChart

Question

我试图使用d3.tip()创建一个弹出窗口时，鼠标在一个dc.leafletChoroplethChart。我真的很接近，问题是d在工具提示的html调用中未定义:

var tip = d3.tip()
.attr("class", "d3-tip")
.html(function(d) {
    console.log("d:", d) //returns undefined
    return d;
});

我把上面的代码放在d3.json("geojson/file.json", function(states)循环之前。

然后在循环中:

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);
});

当鼠标悬停，弹出窗口出现，但它不包含任何东西，因为d是未定义的。知道怎么知道这些地区的名字吗?

谢谢!

Answer 1

将d3-tip与传单一起使用的最简单的解决方案是在插入g元素后将数据绑定到g元素。实现这一目标的简单方法是:

_chart.map().on('layeradd', function(d){
    if (!d.layer.feature) return;
    d3.select(d.layer._container).datum(d.layer.feature);
});