在數據地圖中製作垂直圖例

Question

我使用DataMaps來製作一個choropleth，但在修改圖例時遇到問題。我想讓傳說垂直並在地圖的右側。文件不清楚如何做到這一點。我如何創建一個堆疊/垂直的圖例？

我用下面的代碼來創建的傳說：

var legend_params = { 
    legendTitle: "Some Test Data", 
}; 
map.legend(legend_params); 

而這裏試圖修改它的CSS：

.datamaps { 
    position: relative; 
    display: inline-block; 
    text-align: center; 
} 

.datamaps-legend { 
    color: white; 
    right: -100px; 
    top: 0; 
    position: relative; 
    display: inline-block; 
    text-align: center; 
} 

.datamaps-legend dl { 
    text-align: center; 
    display: inline-block; 
    position: static; 
} 

Here's my jsfiddle example.

Answer 1

我不認爲在數據地圖中有一個水平圖例的選項。我將它用於一個項目，並最終重寫了圖例函數以滿足要求。我可以通過CSS獲取疊加/垂直圖例和地圖右側的圖例。顏色和值不排隊。如果這些值是靜態的，則可以通過針對特定的dt/dd（：nth-​​child或：nth-​​type）元素並根據需要添加填充來將它們對齊。如果這些值是動態的，則需要更聰明的解決方案。我爲.datamaps-legend dt添加了css，並在.datamaps-legend中修改了頂部。示例在fiddle

.datamaps-legend dt{ 
    clear:both; 
} 
.datamaps-legend { 
    color: white; 
    right: -100px; 
    top: 128px; 
    position: relative; 
    display: inline-block; 
    text-align: center; 
}