Mi pregunta: quiero agregar texto de valor en la parte superior de cada cuadrado para el siguiente mapa de calor para que los lectores puedan saber claramente cuál es exactamente el valor. ¿Qué cambios debo hacer para el siguiente código?
El código completo está aquí https://www.d3-graph-gallery.com/graph/heatmap_style.html
Espero que alguien pueda ayudarme con esta pregunta. apreciar
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 Puede hacerlo agregando el siguiente código a su archivo .js
El código completo está aquí 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);