jquery - CSS3 HTML5和JQuery矩阵

我需要达到这样的目标。
每个棕色圆圈代表一个图像。
它将是一个加分，有鼠标或弹出功能。
这个想法是将不同的图像放在一个有4个响应象限的矩阵上（目前支持引导）。我试着用D3和Flot来做，但没有找到任何样本。

最佳答案

这里有一个flot的解决方案：http://jsfiddle.net/w4z7vxzh/
圆的数据如下所示：

var graphData = [{
    data: [
        // format: [x, y, size], x and y between 0 and 20
        [3, 18, 1],
        [8, 18, 1.1],
        [6, 15, 0.9],
        ...

我不得不内联flot并更改点绘制方法以允许动态大小的点/圆（flot代码中用// CHANGES HERE标记）：

var scale = axisx.p2c(1) - axisx.p2c(0);
ctx.arc(x, y, series.data[Math.floor(i / ps)][2] * scale, 0, shadow ? Math.PI : Math.PI * 2, false);

还实现了鼠标悬停时的工具提示。
当窗口调整大小时，图形也会调整大小（暂时不使用引导）。

关于jquery - CSS3 HTML5和JQuery矩阵，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30540646/