我的問題：我想為以下熱圖在每個方塊的頂部添加值文本，以便讀者可以清楚地知道值到底是什么。我應該對以下代碼進行哪些更改。
完整代碼在這里https://www.d3-graph-gallery.com/graph/heatmap_style.html
希望有人可以幫助我解決這個問題。欣賞。
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)
})
uj5u.com熱心網友回復：
IIUC 您可以通過將以下代碼添加到您的.js檔案中來實作
完整代碼在這里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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326012.html
標籤：javascript d3.js 数据可视化
上一篇：D3.js集群節點重疊