CSS3 HTML5和JQuery矩阵

Question

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

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

Answer 1

这里有海军报的解决方案：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码中标有// 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); 

鼠标悬停的工具提示也被实现。
当窗口调整大小时（现在不用引导程序），图形会调整大小。

Answer 2

如果您愿意，您实际上可以在没有图像的情况下实现此目的。

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