尝试为地图D3，js v4中的Null值分配颜色 [英] Trying to Assign Color for Null values in a map D3,js v4

问题描述

我正在创建威斯康星州的地图.除其中一个县的值为"null"(在地图上显示为0)之外，其他情况看起来都不错.

I am creating a map of WI counties. It looks great except one of the counties has a value of "null" that is showing up as 0 on the map.

我手动创建了色标，但是无法弄清楚如何使用空值将郡变成灰色.

I manually created the color scale, but cannot figure out how to grey out the county with the null value.

有什么想法吗?

这是我用来定义颜色的代码

This is the code that I'm using to define the color

    var color = d3.scaleThreshold()
        .domain([0.16,0.31,0.47,0.58,0.94,1.15,1.41,2.02,3.36,6.47])
        .range(["#f7fcf0","#e0f3db", "#ccebc5", "#a8ddb5", "#7bccc4", 
        "#4eb3d3", "#2b8cbe", "#0868ac", "#084081", "#062953"]);

我尝试在域中添加"null"并为范围添加相应的颜色，但这没有任何作用.

I tried adding "null" in the domain and adding a corresponding color to the range, but that didn't do anything.

推荐答案

处理色标中特殊情况的一种简单方法是不将色标直接传递给d3.attr/d3.style，而是将其包装为匿名功能并在那里检查:

A simple way to handle special cases in your colour scale is to not pass the scale directly to d3.attr / d3.style, but wrap it in an anonymous function and check there:

counties
    .attr('fill', d => d === null ? 'grey' : color(d))

这篇关于尝试为地图D3，js v4中的Null值分配颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！