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的工具提示代码？

与JS相比，我在Python方面拥有更多的经验，并且我知道在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){似乎是在检查索引，而不是数据。

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

2 个答案: