Javascript D3.js：如何处理Choropleth映射中的空值（工具提示）

我已经在D3中创建了一张美国choropleth地图。有两层,；第一个是仅具有空白状态的状态层。第二层是县图层，根据数据为县着色。我还创建了一个工具提示来显示数据

然而，有几个州我没有数据。我要么希望这些州没有任何工具提示；或者，工具提示可能只是说“无可用数据”

这就是我的地图的样子：

这是包含数据的县的工具提示的外观：

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

这是我想修的最后一个

以下是工具提示的代码，我尝试在其中创建一个替代工具提示：

// 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();
        }

    })

//添加工具提示
常数tip=d3.tip（）
.attr（'类'，'工具提示容器'）
.html（d=>{
let content=`县：${countyNames[d.id]}`；
content+=`Avg Prem:${premById[d.id]}`；
返回内容；
})
svg.call（tip）；
//添加空工具提示
常量null_工具提示=d3.tip（）
.attr（'类'，'工具提示容器'）
.html（d=>{
让内容=`无可用数据`；
返回内容；
})
调用（空工具提示）；
//添加事件
svg.selectAll（'path'）
//鼠标悬停事件
.on（'mouseover'，（d，i，n）=>{
如果（i）{
提示显示（d，n[i]）；
//手把手（d，i，n）；
}
否则{
null_tooltip.show（）；
}
})

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

我在Python方面比JS有更多的经验，我知道在Python中有很多简单的方法可以做到这一点；对JS不太清楚

---

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

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

当我在控制台上记录“d.id”时，我意识到它仍然在给我状态的FIPS代码（而不是空值）。由于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，这样就消除了“null状态”的工具提示

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

当我在控制台上记录“d.id”时，我意识到它仍然在给我状态的FIPS代码（而不是空值）。由于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，这样就消除了“null状态”的工具提示

我认为你的条件

if（I）{

在

mousover

回调中应该是

if（d）{

if（I）{

看起来像是在检查索引，而不是数据。

我认为你的条件

if（I）{

在

mousover

回调中应该是

if（d）{/code>
if（I）{
看起来它是在检查索引，而不是数据。
是的，但本例中的索引是FIPS县/州代码。我以为它在为各州生成错误/空值，但结果不是，所以我认为这是问题所在。我只需更改代码来测试FIPS代码的长度。是的，但索引在t中他的例子是FIPS县/州代码。我以为它会为州生成错误/空值，但事实并非如此，所以我认为这就是问题所在。我只需更改代码以测试FIPS代码的长度。