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

Question

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

    })

這根本行不通，但是我很困惑如何創建一個if-else語句，該語句可能會在此處測試空值。 或者，是否有一種方法不觸發null的工具提示代碼？

我在Python方面比在JS中擁有更多的經驗，並且我知道在Python中有簡單的方法可以做到這一點。 不確定JS。

編輯：解決； 見下文。 基本上，我意識到FIPS代碼對於縣來說是5位數字，而對於州來說只有2位數字。 然后，我在if語句中使用了“ d.id.length”，並要求它大於4。可能仍然是一個更好的解決方案，它避免了“空值”問題，但是在這種情況下它可以工作。

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，這消除了“空狀態”的提示。

Answer 2

我認為您的條件if (i){在mousover回調中應為if (d){ 。 if (i){似乎是在檢查索引，而不是數據。