d3.js - 带有 svg 渐变的热图颜色图例不起作用

Question

将 defs（用于定义）元素附加到 SVG

var defs = svg.append("defs");

//向defs添加一个linearGradient元素并给它一个唯一的id

var linearGradient = defs.append("linearGradient")

.attr("id123", "linear-gradient");

//水平渐变

线性渐变

.attr("x1", "0%")

.attr("y1", "0%")

.attr("x2", "100%")

.attr("y2", "0%");

//建立一个色标

var colorScale = d3.scale.linear().range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c",

        "#f9d057","#f29e2e","#e76818","#d7191c"]);

//使用D3的数据添加多个色标/进入步骤

linearGradient.selectAll("停止")

.data( colorScale.range() )

.enter().append("stop")

.attr("offset", function(d,i) { return i/(colorScale.range().length-1); })

.attr("stop-color", function(d) { return d; });

标签： d3.jsd3heatmap