html - 图中点的CSS样式

Question

我创建了一个 nvd3使用 rCharts 键入图形包裹。我将它保存在独立的 html 中并将其导入 rmarkdown带有 <iframe src = 'Figure.html'> 的文件.

我查看了 html通过“检查元素”功能在 Chrome 和 Firefox 中获取源代码，发现对 css 进行了以下编辑:

.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
    stroke-width: 10px;
    fill-opacity: 1;
    stroke-opacity: 1;
}

给出:

这就是我想要得到的效果。但是，如果我将上面的代码插入 css ，它没有被“捡起”。其他样式被拾起，所以正在读取 css，但上面的似乎被丢弃了。有什么想法吗？

html图在这里:https://gist.github.com/anonymous/b187e77d795e5bf96f51

编辑 由于 jbaums 和 sal niro 的提示，破解了这个。这是转换 rCharts 的工作流程nPlot与 'lineChart' 合并为 'lineChart' 和 'scatterChart'。这是您的 rmarkdown 的相关部分代码:

 ```{r 'Figure'}  
require(rCharts)
load("data/df.Rda") 
# round data for rChart tooltip display
df$value <- round(df$value, 2)
n <- nPlot(value ~ Year, group = 'variable', data = df, type = 'lineChart') 
n$yAxis(axisLabel = 'Labor and capital income (% national income)')
n$chart(margin = list(left = 100)) # margin makes room for label
n$yAxis(tickFormat = "#! function(d) {return Math.round(d*100*100)/100 + '%'} !#")
n$xAxis(axisLabel = 'Year')
n$chart(useInteractiveGuideline=TRUE)
n$chart(color = colorPalette)
n$addParams(height = 500, width = 800)
n$setTemplate(afterScript = '<style>
  .nv-point {
    stroke-opacity: 1!important;
    stroke-width: 6px!important;
    fill-opacity: 1!important;
  } 
</style>'
)
n$save('figures/Figure.html', standalone = TRUE)
```

Answer 1

如果您将规则指定为 !important , 那么它们以后就不会被否决(尽管对 !important 的支持在某些旧版本的 IE 中是有限的)。

在 <style> 之间添加以下内容和 </style>您的 html 文件的标签:

.nv-point {
  stroke-opacity: 1 !important;
  stroke-width: 10px;
  fill-opacity: 1 !important;
}

在 Chrome 39.0.2171.95 m 中呈现:

在 Firefox 34.0.5 和 IE 11 中: