My question : I want to add value text on top of each square for the following heatmap so the readers can clearly know what exactly the value is. What changes should i make for the following code.
The full code is here https://www.d3-graph-gallery.com/graph/heatmap_style.html
Hope someone can help me with this question. Appreiate.
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})
IIUC
You can do it with adding the below code to to you .js file
Complete code is here https://codepen.io/mohan-ys/pen/rNwgpmJ
var bar = svg
.selectAll(".label")
.data(data)
.enter()
.append("g")
.attr("class", "label")
.attr("transform", "translate(10,15)");
bar
.append("text")
.attr("x", (d) => x(d.group))
.attr("y", (d) => y(d.variable))
.attr("dy", ".35em")
.text((d) => d.value);