css造型的点在图中 [英] css styling of points in figure

问题描述

我使用 rCharts 包创建了一个 nvd3 类型图。我将它保存在一个独立的 html 中，并将它导入到 rmarkdown 文档中， iframe src ='Figure.html'> 。

I created an nvd3 type graph with the rCharts package. I saved it in a standalone html and am importing it into an rmarkdown document with <iframe src = 'Figure.html'>.

我通过inspect element功能查看了Chrome和Firefox中的 html 源代码，发现对 css ：

I looked at the html source in Chrome and Firefox via the 'inspect element' feature and found that the following edits to the css:

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

提供：

这是效果我想获得。但是，如果我将上面的代码插入到 css ，它不是'拾起'。其他样式被拾起，所以css正在读取，但上面似乎被丢弃。任何想法？

which is the effect I want to obtain. However, if I insert the above code into the css, it is not 'picked up'. Other stylings are picked up, so the css is being read, but the above seems to be discarded. Any ideas?

html 图如下： https://gist.github.com/anonymous/b187e77d795e5bf96f51

EDIT 由于jbaums和sal niro的提示，破解了这一个。这里是工作流将 rCharts nPlot 转换为'lineChart'和'scatterChart'的组合。这是 rmarkdown 代码的相关部分：

EDIT Cracked this one thanks to jbaums and a hint by sal niro. Here's the workflow to transform an rCharts nPlot with 'lineChart' into a combination of 'lineChart' and 'scatterChart'. This is the relevant part of your rmarkdown code:

 ```{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)
```

推荐答案

如果您将规则指定为 ！important ，那么它们不会在以后被推翻（虽然支持！important 在某些旧版本的IE是有限的）。

If you specify the rules as !important, then they won't be overruled later (though support for !important is limited in some old versions of IE).

在< style> 和< / style> 您的html文件的标签：

Add the following between the <style> and </style> tags of your html file:

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

在Chrome 39.0.2171.95中呈现：

Rendered in Chrome 39.0.2171.95 m:

在Firefox 34.0.5和IE 11 ：

And in Firefox 34.0.5 and IE 11:

这篇关于css造型的点在图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！