如何实现D3颜色图例水平显示而非垂直显示

D3垂直图例改水平显示解决方案 #

你当前用的是D3默认的垂直方向图例轴，调整为水平显示只需修改几处核心配置：

• 首先修改图例轴的方向声明，把原本用的垂直轴d3.axisLeft()/d3.axisRight()替换为水平轴d3.axisBottom()，如果是连续色阶图例，同步将颜色比例尺的映射范围从y轴方向改为x轴方向。
• 调整色带绘制逻辑：如果是用rect拼接的离散色带，把每个色块的位置计算从y轴排列改为x轴排列，y值固定；如果是用渐变实现的连续色带，把渐变方向从垂直改为水平。
• 调整现有代码中轴容器的位移参数，适配水平轴的摆放位置：

var svg = d3.select(selector_id)
.append("svg")
// 可按需缩小高度、放大宽度适配水平图例尺寸
.attr("height", (legendheight) + "px")
.attr("width", (legendwidth) + "px")
.style("position", "absolute")
.style("left", "0px")
.style("top", "0px")

svg
.append("g")
// 水平轴一般放在色带下方，translate的y值改为色带高度+顶部边距即可
.attr("transform", "translate(" + margin.left + "," + (legendColorBlockHeight + margin.top) + ")")
.call(legendaxis);

你可以根据自己的实际边距、色带尺寸微调位移数值，即可得到目标水平显示效果。

内容的提问来源于stack exchange，提问作者Harry