R，rMaps，Datamaps：移動Choropleth地圖的圖例

Question

我試圖將圖例放在美國的Choropleth地圖下方（ 類似於我創建的通用地圖的示例 ）。 我對JS或CSS不太熟悉，但我在R-3.2.1\\library\\rMaps\\libraries\\datamaps\\js目錄中的datamaps.all.min.js文件中打了R-3.2.1\\library\\rMaps\\libraries\\datamaps\\js希望能夠找到它圖例的標簽及其默認值。 我找到了這個：

.datamaps-legend dt, .datamaps-legend dd { 
  float: left; 
  margin: 0 3px 0 0;

} .datamaps-legend dd {
  width: 20px; 
  margin-right: 6px; 
  border-radius: 3px;

} .datamaps-legend {
  padding-bottom: 20px; 
  z-index: 1001; 
  position: absolute; 
  left: 4px; 
  font-size: 12px; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

我將其更改為此，並將其包含在header.html文件中：

.datamaps-legend dt, .datamaps-legend dd { 
  float: left; 
  margin: 0 3px 0 0;

} .datamaps-legend dd {
  width: 20px; 
  margin-right: 6px; 
  border-radius: 3px;

} .datamaps-legend {
  padding-bottom: 20px; 
  z-index: 1001; 
  position: absolute; 
  left: 40px; 
  font-size: 10px; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

這些更改似乎是錯誤的或無效的，可能是因為還有其他一些.css文件優先於這些指令。 當前，地圖的相關部分如下所示：

問題包括1）在我看來是對文本 編輯的 一種莫名其妙的粗體和斜體處理 ：修復了我的.css文件中的內容，以及2）盡管是"position: absolute" ，但該圖形流到了下表中。

Answer 1

您應該能夠添加一些CSS來覆蓋默認樣式，如下所示：

.datamaps-legend {
  position: static;
}

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

Answer 2

因此，根據@markmarkoh的建議，我最終要做的是修改位於~\\R-3.2.1\\library\\rCharts\\libraries\\datamaps\\layouts的模板腳本chart.html ，並將其結尾更改為

<style>
.datamaps {
  position: relative;
}
</style>

至

<style>
.datamaps {
  position: relative;
  display: inline-block;
  text-align: center;
}
.datamaps-legend {
  position: static;
}

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
}
</style>

然后將修改后的副本保存到我的工作目錄中，並更改圖形的模板位置，如下所示：

map1$setTemplate(script = 'chart.html')