将 null 传递给 d3.selection.on 函数答案

【问题标题】：Getting null passed to the d3.selection.on function将 null 传递给 d3.selection.on 函数
【发布时间】：2015-05-13 10:38:55
【问题描述】：

我正在尝试结合 bl.ocks 上 d3 示例中的两个示例（Choropleth 和 click-to-zoom）。目前我有这个（响应是来自我的后端的 AJAX 响应，它传递了我需要用于显示 choropleth 的 us.json 之类的东西）。

风格

.background {
    fill: transparent;
    pointer-events: all;
}

#states {
    fill: #aaa;
}

#state-borders {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    pointer-events: none;
}

Javascript

response = parseJSON(response);
var us = response['us'];
var data = response['data'];
var reportID = response['reportID'];
var thresholds = response['thresholds'];
var colorScheme = response['colorScheme'];
var max = response['max'];
var options = response['options'];
var name = options['name'];
var width = 900, height = 500, centered;

//define the display threshold
var color = d3.scale.threshold()
    .domain(thresholds)
    // .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]); //purple
    .range(colorScheme); //all colors

var rateById = {};
for(var i in data){
    rateById[data[i]['id']] = +data[i]['value'];
}

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("#" + rowID + " .choropleth:nth-of-type(" + (parseInt(options['i']) + 1) + ")").append("svg")
    .attr("width", width)
    .attr("height", height)

var g = svg.append("g");      

svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) { return color(rateById[d.id]); });

g.append("g")
    .attr("id", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)

g.append("path")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
    .attr("id", "state-borders")
    .attr("d", path);

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", clicked);

function clicked(d){
    console.log(typeof d);
    var x, y, k;

    if(d && centered !== d){
        var centroid = path.centroid(d);
        x = centroid[0];
        y = centroid[1];
        k = 4;
        centered = d;
    }else{
        x = width / 2;
        y = height / 2;
        k = 1;
        centered = null;
    }

    console.log(x + "\n" + y + "\n" + k + "\n" + centered);

    g.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");
}

我把console.log(typeof d);放在了检查参数的状态是否传递给了click函数，发现它是null但是如果我取出添加在县线的块然后点击函数传递适当的值和缩放功能按预期工作。我尝试重新排列按 SVG 元素顺序添加的各种块，但没有任何成功。我找不到任何关于传递给 click 函数的参数的确切来源的文档，所以我不知道是什么导致它为空。

【问题讨论】：

d 是指绑定到被点击元素的数据，而您没有将任何数据绑定到rect 元素。
但是如果我取出创建县的块然后它工作正常并且该块的存在不应该影响矩形是否有数据
不，不应该，而且我不明白你是如何得到这种行为的。您能否提供一个完整的示例来演示该问题？
我在上面的 JS 部分提供的是所有与显示等值线相关的代码。唯一缺少的是 us 和 data 中的数据，它们是 us.json 和 id/value 对，就像 choropleth bl.ock 中包含的数据文件中一样。 colorScheme 默认是上面注释掉的行中包含的颜色。

标签： javascript jquery svg d3.js choropleth

【解决方案1】：

我通过移动创建县的街区解决了这个问题

svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) { return color(rateById[d.id]); })
    .on("click", clicked);

到最后（就在我定义clicked 函数之前）并将点击事件处理程序放在该元素而不是矩形上。

【讨论】：