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元素之后，以简单的方式实现这一点：

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

d undefined for d3.tip（）工具提示，带有dc.leafletChoroplethChart

1 个答案: