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

问题描述

我在 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。可能仍然是一个更好的解决方案，而且这个解决方案避免了“空值”问题，但它在这种情况下有效。

标签： javascriptd3.jsnulltooltipchoropleth

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

当我在控制台记录“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，这样就消除了“空状态”的工具提示。

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

问题描述

解决方案

推荐阅读