jquery - CSS3 HTML5 和 JQuery 矩阵

Question

我需要实现类似 . 每个棕色圆圈代表一个图像。 具有鼠标悬停功能或弹出窗口将是一个优势。

想法是将不同的图像放置在具有 4 个响应象限的矩阵上(目前支持 Bootstrap)。我尝试使用 D3 和 Flot 来做到这一点，但没有找到任何示例。

Answer 1

这是一个使用 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);

鼠标悬停时的工具提示也已实现。
当窗口调整大小时，图形也会调整大小(目前没有 Bootstrap )。