[英]D3.js: How to Deal with Null Values in Choropleth Map (Tooltip)
I've created a US choropleth map in D3. 我在D3中创建了美国的Choropleth地图。 There are two layers;
有两层; the first is a state layer that simply has blank states.
第一个是仅包含空白状态的状态层。 The second layer is a county layer that colors the counties based on data.
第二层是县层,根据数据为县上色。 I have also created a tooltip to show the data.
我还创建了一个工具提示来显示数据。
There are, however, a few states for which I have no data. 但是,有些州没有我的数据。 I either want for there to be no tooltip at all for those states;
我要么希望那些州根本没有工具提示; or alternatively, the tooltip could just say something like "no data available."
或者,工具提示可能只说“无可用数据”之类的内容。
This is what my map looks like: 这就是我的地图:
This is what the tooltip looks like for a county with data: 这是带有数据县的工具提示:
This is what the tooltip looks like when it hits a null value: 这是工具提示达到空值时的样子:
It's that last one that I want to fix. 我要修复的是最后一个。
Here is the code for the tooltip, where I tried to create an alternative tooltip: 这是工具提示的代码,我尝试在其中创建替代工具提示:
// 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">$ ${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();
}
})
This doesn't work at all, but I'm quite confused how to create an if-else statement that might test for a null value here. 这根本行不通,但是我很困惑如何创建一个if-else语句,该语句可能会在此处测试空值。 Or alternatively, if there's just a way to not trigger the tooltip code for the nulls?
或者,是否有一种方法不触发null的工具提示代码?
I have more experience in Python than JS and I know there are easy ways to do this in Python; 我在Python方面比在JS中拥有更多的经验,并且我知道在Python中有简单的方法可以做到这一点。 not sure about JS.
不确定JS。
Edit: Solved; 编辑:解决; see below.
见下文。 Basically, I realized that the FIPS codes are 5 digits for counties, but only 2 digits for states.
基本上,我意识到FIPS代码对于县来说是5位数字,而对于州来说只有2位数字。 I then used "d.id.length" in the if statement and required it to be greater than 4. Might still be a better solution, and this one avoided the "null value" issue, but it works in this case.
然后,我在if语句中使用了“ d.id.length”,并要求它大于4。可能仍然是一个更好的解决方案,它避免了“空值”问题,但是在这种情况下它可以工作。
Alright, I solved this, albeit somewhat indirectly. 好吧,尽管有些间接,我还是解决了这个问题。 Still might be a better solution out there.
仍然可能是一个更好的解决方案。
When I console logged "d.id", I realized it was still giving me the FIPS codes for the states (rather than a null). 当我用控制台登录“ d.id”时,我意识到它仍然为我提供了状态的FIPS代码(而不是null)。 Since FIPS County Codes have 5 digits and state codes only have 2 digits, I changed my tooltip function to:
由于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" would just be the data object and the "id" is the FIPS code. “ d.id”仅是数据对象,而“ id”是FIPS代码。 So I just required the length of "d.id" to be greater than 4 and that eliminates the tooltip for the "null states".
因此,我只要求“ d.id”的长度大于4,这消除了“空状态”的提示。
I think your condition if (i){
in the mousover
callback should be if (d){
. 我认为您的条件
if (i){
在mousover
回调中应为if (d){
。 if (i){
seems like it's checking for an index, not for data. if (i){
似乎是在检查索引,而不是数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.