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