R、rMaps、datamaps:移动等值线图的图例
R, rMaps, datamaps: Moving the legend of a choropleth map
我正在尝试将图例置于美国等值线图 (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 来覆盖默认样式,如下所示:
.datamaps-legend {
position: static;
}
.datamaps-legend dl {
text-align: center;
display: inline-block;
}
所以我最终按照 @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')
我正在尝试将图例置于美国等值线图 (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 来覆盖默认样式,如下所示:
.datamaps-legend {
position: static;
}
.datamaps-legend dl {
text-align: center;
display: inline-block;
}
所以我最终按照 @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')