Question

我一直在d3制作地图，并设法添加了一个图例，该图例按照此示例绘制了比例：https://eyeseast.github.io/visible-data/2013/08/27/responsive-legends-with-d3/

我现在的问题是如何修改它以显示最小和最大数量，第一个和最后一个。

我知道d3.max和d3.min，我一直在尝试这样做，但我没有运气。

Answer 1

假设您有以下颜色渐变：

var ramp = d3.scale.linear().domain([0,100]).range(["red","blue"]);

调用 ramp（0）将返回＆＃34;＃ff0000＆＃34; （红色）

调用 ramp（100）将返回＆＃34;＃0000ff＆＃34; （蓝色）

您可以使用d3.extent在域中找到最小值和最大值。

通话：

d3.extent(ramp.domain())

返回：

[0, 100]

在图例场景中，您只需要为范围内的最小值和最大值生成图例键，而不是整个范围：

var keys = legend.selectAll('li.key').data(d3.extent(colors.range()));

更新了答案 如果要显示存储桶，但只有第一个和最后一个值作为标记，则有几个选项。

可能最简单的就是使用CSS。默认情况下使标签透明：

li.key {
    border-top-width: 15px;
    border-top-style: solid;
    color: transparent;
    width: 10%;
    padding-left: 0;
    padding-right: 0;
}

然后只显示第一个和最后一个键：

li.key:first-child, li.key:last-child {
    color: black;
}

颜色透明度不适用于＆lt; IE 8

在等值区域地图图例中显示最大值和最小值

1 个答案: