Javascript 将null传递给d3.selection.on函数

我试着结合bl.ocks和上d3示例中的两个示例。目前，我有一个来自后端的AJAX响应，它传入了显示choropleth所需的us.json之类的内容

风格

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

---

我把控制台放在d的logtyped上；要检查传递给click函数的参数的状态是否为null，但如果我取出添加到county行中的块，则click函数将传递适当的值，缩放函数将按预期工作。我尝试重新排列按SVG元素顺序添加的各个块，但没有成功。我找不到关于传递给click函数的参数的确切来源的任何文档，因此我不知道是什么导致它为空。

我通过移动创建该函数的块解决了这个问题

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函数并将click事件处理程序放在该元素上而不是rect上之前的右端。

d指绑定到被单击元素的数据，您没有将任何数据绑定到rect元素。但是如果我去掉创建县的块，那么它工作正常，并且该块的存在不应该影响rect是否有数据。不，不应该，我不知道您是如何得到这种行为的。你能提供一个完整的例子来演示这个问题吗？我在上面的JS部分中提供的是所有与显示choropleth相关的代码。唯一缺少的是us中的数据以及us.json和id/值对的数据，就像choropleth bl.ock中包含的数据文件一样。默认情况下，colorScheme是其上方注释掉的行中包含的颜色。

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