首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >R,rMaps,datamaps:移动合唱图的图例

R,rMaps,datamaps:移动合唱图的图例
EN

Stack Overflow用户
提问于 2015-08-06 14:51:12
回答 2查看 767关注 0票数 1

我试图在美国的合唱地图(一个类似于我所创建的通用地图的例子)下面画一个传说的中心。我对JS或CSS不是很熟悉,但我在R-3.2.1\library\rMaps\libraries\datamaps\js目录中查看了R-3.2.1\library\rMaps\libraries\datamaps\js文件,希望能够找到图例的标记及其默认值。我发现了这个:

代码语言:javascript
复制
.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文件中:

代码语言:javascript
复制
.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)在我看来,文本编辑是一种莫名其妙的粗体和斜体处理:修正了在我的文件和2)中,虽然是"position: absolute",但图形流到了下面的表格中。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-08-06 16:19:16

因此,我最后根据@markmarkoh的建议,修改了位于~\R-3.2.1\library\rCharts\libraries\datamaps\layouts中的模板脚本chart.html,并从

代码语言:javascript
复制
<style>
.datamaps {
  position: relative;
}
</style>

代码语言:javascript
复制
<style>
.datamaps {
  position: relative;
  display: inline-block;
  text-align: center;
}
.datamaps-legend {
  position: static;
}

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

然后将修改后的副本保存到我的工作目录中,并更改图形的模板位置,如下所示:

代码语言:javascript
复制
map1$setTemplate(script = 'chart.html')
票数 0
EN

Stack Overflow用户

发布于 2015-08-06 15:50:21

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

代码语言:javascript
复制
.datamaps-legend {
  position: static;
}

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31858980

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档