D3.js:如何处理Choropleth Map (工具提示)中的零值

Question

我在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- here语句来测试空值。或者，如果有一种方法不触发空值的工具提示代码？

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

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

Answer 1

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

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

Answer 2

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