D3.js：如何处理 Choropleth Map 中的 Null 值（工具提示）答案

【问题标题】：D3.js: How to Deal with Null Values in Choropleth Map (Tooltip)D3.js：如何处理 Choropleth Map 中的 Null 值（工具提示）
【发布时间】：2019-11-23 03:27:53
【问题描述】：

我在 D3 中创建了美国等值线地图。有两层；第一个是仅具有空白状态的状态层。第二层是县层，根据数据对县进行着色。我还创建了一个工具提示来显示数据。

但是，有几个州我没有数据。我要么希望这些州根本没有工具提示；要么或者，工具提示可以只说“没有可用数据”之类的内容。

这是我的地图的样子：

对于有数据的县，工具提示如下所示：

这是工具提示遇到空值时的样子：

这是我要修复的最后一个。

这是工具提示的代码，我尝试在其中创建替代工具提示：

// add tooltip
const tip = d3.tip()
    .attr('class', 'tooltip-container')
    .html(d => {  
        let content = `<div class="tooltip-left"><strong>County: </strong><span class="tooltip-right">${countyNames[d.id]}</span></div>`;
        content += `<div class="tooltip-left"><strong>Avg Prem: </strong><span class="tooltip-right">$&nbsp${premById[d.id]}</span></div>`;

        return content;
    })

svg.call(tip);

// add null tooltip
const null_tooltip = d3.tip()
    .attr('class', 'tooltip-container')
    .html(d => {  
        let content = `<div class="tooltip-left"><strong>No Data Available</strong></div>`;

        return content;
    })

svg.call(null_tooltip);

// add events
svg.selectAll('path')
    // mouse hover event
    .on('mouseover', (d, i, n) => {

        if (i){
            tip.show(d,n[i]);
            // handleMouseOver(d,i,n);
            }
        else {

            null_tooltip.show();
        }

    })

这根本不起作用，但我很困惑如何创建一个可能在这里测试空值的 if-else 语句。或者，如果只有一种方法可以不触发空值的工具提示代码？

我在 Python 方面的经验比 JS 多，而且我知道在 Python 中有很多简单的方法可以做到这一点；不确定JS。

编辑：已解决；见下文。基本上，我意识到 FIPS 代码对于县来说是 5 位数字，而对于州来说只有 2 位数字。然后我在 if 语句中使用了“d.id.length”，并要求它大于 4。可能仍然是一个更好的解决方案，并且这个解决方案避免了“空值”问题，但它在这种情况下有效。

【问题讨论】：

标签： javascript d3.js null tooltip choropleth

【解决方案1】：

我认为mousover 回调中的if (i){ 条件应该是if (d){。 if (i){ 似乎是在检查索引，而不是数据。

【讨论】：

是的，但在这种情况下，索引是 FIPS 县/州代码。我认为它正在为状态生成错误/空值，但事实证明不是，所以我认为这就是问题所在。我只需要更改代码来测试 FIPS 代码的长度。

【解决方案2】：

好的，我解决了这个问题，尽管有点间接。仍然可能是一个更好的解决方案。

当我在控制台记录“d.id”时，我意识到它仍在给我状态的 FIPS 代码（而不是 null）。由于 FIPS 县代码有 5 位数字，而州代码只有 2 位数字，我将工具提示功能更改为：

// add events
    svg.selectAll('path')
        // mouse hover event
        .on('mouseover', (d, i, n) => {
            console.log(d.id.length);

            if (d.id.length > 4){
                tip.show(d,n[i]);
                // handleMouseOver(d,i,n);
                }

        })

“d.id”只是数据对象，“id”是 FIPS 代码。所以我只要求“d.id”的长度大于 4，这样就消除了“空状态”的工具提示。

【讨论】：