CSS3 HTML5 和 JQuery 矩阵

Question

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

想法是将不同的图像放置在具有 4 个响应象限的矩阵上（目前支持 Bootstrap）。我尝试使用 D3 和 Flot 来做，但没有找到任何样本开始。

Answer 1

如果你愿意，你实际上可以在没有图像的情况下实现这一点。

HTML:

<div class="wrapper">
    <div class="chart">
        <div class="quadrant1"></div>
        <div class="quadrant2"></div>
        <div class="quadrant3"></div>
        <div class="quadrant4"></div>
        <div class="item1" title="Hover me 1"></div>
        <div class="item2" title="Hover me 2"></div>
        <div class="item3" title="Hover me 3"></div>
        <div class="item4" title="Hover me 4"></div>
        <div class="item5" title="Hover me 5"></div>
        <div class="item6" title="Hover me 6"></div>
    </div>
</div>

CSS:

.wrapper {
    max-width:80%;
    margin:auto;}

.chart {
    height:0px; /* can't set 100% height, since this would be calculated as a % of the parent element */
    padding-bottom:100%; /*make height relative to the width */
    width:100%; /* Fill the wrapper (makes the chart responsive) */
    position:relative; /* MAke sure the items are positioned relative to the chart, not the body, etc. */}

.quadrant1,
.quadrant2,
.quadrant3, 
.quadrant4 {
    height:0px;
    padding-bottom:calc(49.5% - 4px); /* (Desired height - border size * 2) */
    width:calc(49.5% - 4px); /* (Desired width - border size * 2) */
    float:left;
    border:2px solid black;}

/** Create the Grid Spacing Between the Quadrants **/
.quadrant1 {
    margin-right:1%;
    margin-bottom:1%;}
.quadrant2 {margin-bottom:1%;}
.quadrant3 {margin-right:1%;}
.quadrant4 {}


.item1 {
    position:absolute; /* remove from the document flow, position according to nearest ancestor with position */
    border:2px solid brown; /* Hopefully this one is self-explanitory :-) */
    height:calc(8% - 4px); /* (Desired height - border size * 2) */
    width:calc(8% - 4px); /* (Desired width - border size * 2) */
    border-radius:500px; /* some number that will never be exceeded by the size of the circle */
    top:50%; /* Vertical position - could also use 'bottom' */
    left:50%; /* Horizontal position - could also use 'bottom' */
    margin-top:-4%; /* offset half the height of the circle to center it on the coordinates */
    margin-left:-4%;} /* offset half the width of the circle to center it on the coordinates */

.item2 {position:absolute;border:2px solid brown;height:calc(8% - 4px);width:calc(8% - 4px);border-radius:500px;top:25%;left:25%;margin-top:-4%;margin-left:-4%;}
.item3 {position:absolute;border:2px solid brown;height:calc(8% - 4px);width:calc(8% - 4px);border-radius:500px;top:75%;left:75%;margin-top:-4%;margin-left:-4%;}
.item4 {position:absolute;border:2px solid brown;height:calc(8% - 4px);width:calc(8% - 4px);border-radius:500px;top:30%;left:80%;margin-top:-4%;margin-left:-4%;}
.item5 {position:absolute;border:2px solid brown;height:calc(4% - 4px);width:calc(4% - 4px);border-radius:500px;top:5%;left:95%;margin-top:-2%;margin-left:-2%;}
.item6 {position:absolute;border:2px solid brown;height:calc(15% - 4px);width:calc(15% - 4px);border-radius:500px;top:90%;left:10%;margin-top:-7.5%;margin-left:-7.5%;}

.item1:hover, 
.item2:hover,
.item3:hover,
.item4:hover,
.item5:hover, 
.item6:hover {background:#0066CC;border-color:#333333;}

只需根据需要添加和放置任意数量的项目。如果您出于某种原因仍想使用图像，您也可以使用 background-image 属性通过 CSS 插入它们。在 Chrome/Safari 中进行了测试，但应该在整个范围内都非常兼容（不支持 IE8 或更低版本 - 不支持圆角。）

如果需要，您还可以插入 Bootstrap 的工具提示或弹出框。

CodePen 在这里：http://codepen.io/ryantdecker/pen/eNgGWp

Answer 2

这里有一个 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 并更改点绘制方法以允许动态大小 points/circles（在 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);

鼠标悬停时的工具提示也已实现。
当 window 调整大小时图表也会调整大小（目前没有 bootstrap）。

CSS3 HTML5 和 JQuery 矩阵

CSS3 HTML5 and JQuery Matrix

html

css

jquery

flot

d3.js