R，rMaps，datamaps：移动等值线图的图例答案

【问题标题】：R, rMaps, datamaps: Moving the legend of a choropleth mapR，rMaps，datamaps：移动等值线图的图例
【发布时间】：2015-08-06 14:51:12
【问题描述】：

我正在尝试将图例置于美国等值线图下方的中心 (an example of a generic map similar to what I've created)。我对 JS 或 CSS 不是很熟悉，但我在位于 R-3.2.1\library\rMaps\libraries\datamaps\js 目录中的 datamaps.all.min.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"，图形流向下表。

【问题讨论】：

标签： css r rcharts datamaps rmaps

【解决方案1】：

您应该能够添加一些 CSS 来覆盖默认样式，如下所示：

.datamaps-legend {
  position: static;
}

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

【讨论】：

谢谢，这正好让我到了那里。我马上发布我的答案。

【解决方案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')

【讨论】：