D3.js 向地图图例添加标签

我不太明白。正在尝试修改：

---

为了能够将低值添加到条的左侧，将高值添加到条的右侧。如果有人能指出正确的方向，或展示另一个例子，我们将不胜感激。

只需复制域边界的轴标记即可

使svg稍微大一点以适合文本

.轴文本{
字体：10px无衬线；
}
.轴线，.轴路径{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
svg{
左侧填充：50px；
}
var w=300，h=50；
var key=d3.选择（“#legend1”）
.append（“svg”）
.attr（“宽度”，w+100）
.attr（“高度”，h+50）；
变量图例=key.append（“defs”）
.append（“svg:linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“100%”）
.attr（“x2”，“100%”）
.attr（“y2”，“100%”）
.attr（“扩展方法”、“pad”）；
图例。追加（“停止”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”，“f7fcf0”）
.attr（“停止不透明度”，1）；
图例。追加（“停止”）
.attr（“抵销”、“33%”）
.attr（“停止颜色”，“bae4bc”）
.attr（“停止不透明度”，1）；
图例。追加（“停止”）
.attr（“抵销”、“66%”）
.attr（“停止颜色”，“7BCC4”）
.attr（“停止不透明度”，1）；
图例。追加（“停止”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”，“#084081”）
.attr（“停止不透明度”，1）；
key.append（“rect”）
.attr（“宽度”，w）
.attr（“高度”，h-30）
.style（“填充”、“url（#渐变）”）
.attr（“转换”、“翻译（50,10）”）；
变量y=d3.scaleLinear（）
.范围（[300，0]）
.域（[68,12]）；
var yAxis=d3.axisBottom（）
.比例（y）
.蜱（5）；
键。附加（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（50,30）”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，-30）
.attr（“dy”，“0”）
.attr（“dx”，“0”）
.attr（“填充”、“千”）
.style（“文本锚定”、“结束”）
.文本（“轴标题”）；
var extras=key.select（“.y.axis”）.selectAll（“.dummy”）
.data（y.domain（））
.输入（）
.附加（“g”）
.attr（“类”、“勾号”）
.attr（“transform”，d=>`translate（${y（d）}，0）`）；
每个附加功能（d）{
d3.选择（本）。追加（“行”）.attr（“笔划”），“#000”）.attr（“y2”，6）；
d3.选择（本）。追加（“文本”）.attr（“填充”），“#000”）.attr（“y”，9）。attr（“dy”，“0.71em”）.text（d）；
});

如上所述的可能重复，使用

.domain（）.nice（）

添加第一个（低值）和最后一个（高值）记号。正如@riov8在回答中提到的，增加svg的宽度或添加边距。