这种方法是否适合制作热图矩阵

Question

我需要这样的热图矩阵，

现在我尝试使用 D3.js，我可以制作矩阵并且还可以缩放它，但现在我无法将注释添加到矩形，因为 SVG 不支持它。

我是在正确的轨道上还是我可以使用 Div 和 jQuery 来开发这个热图，我访问了数百个插件但没有满足我的需求。

适当的矩阵 - http://jsfiddle.net/nhe613kt/49/

尝试用一个矩形添加注释 - http://jsfiddle.net/nhe613kt/60

我可以使用任何其他插件或简单的 HTML 吗？

var width = 600,
height = 600;
var margin = {top: -5, right: -5, bottom: -5, left: -5};

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 15])
    .on("zoom", zoomed);

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", width)
                                    .attr("height", height)
                                    .style("background-color", "black")
                                    .append("g")
                                    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
                                    .call(zoom);

var zoomed = function () {
    svgContainer.attr("transform", "translate("+ d3.event.translate + ")scale(" + d3.event.scale + ")");
};

var zoom = d3.behavior.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed)
.size([width, height]);

svgContainer.call(zoom);

var rectangle1 = svgContainer.append("rect")
                            .attr("x", 0)
                            .attr("y", 0)
                            .attr("width", 100)
                            .attr("height", 100)
                            .attr("fill", "red")
                            .append("text")
                            .text("Hahaha");

Answer 1

您需要正确配置 text 节点：

svgContainer.append("text")
                        .attr("x", 10)
                        .attr("y", 20)
                        .attr("fill", "blue")
                        .text("Hahaha");

否则，它可能在可见区域之外（y=0 是一个常见错误；Y 坐标移动文本的基线，而不是右上角）。同样没有颜色，文本将从父级继承颜色。

演示：http://jsfiddle.net/nhe613kt/65/

这种方法是否适合制作热图矩阵

Is this approach right of making a heatmap matrix

javascript

jquery

svg

matrix

d3.js