CODEWITHSUNDEEP
d3.jsd3heatmap
Sanu Kumar
Sanu Kumar

Reputation: 1

Heatmap color legend with svg gradient not working

Append a defs (for definition) element to your SVG

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

//Append a linearGradient element to the defs and give it a unique id

var linearGradient = defs.append("linearGradient")

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

//Horizontal gradient

linearGradient

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

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

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

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

//Build a color scale

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

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

//Append multiple color stops by using D3's data/enter step

linearGradient.selectAll("stop")

.data( colorScale.range() )

.enter().append("stop")

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

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

Upvotes: 0

Views: 137

Answers (0)

Related Questions