css造型图中的点

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'>.

我用rCharts包创建了一个nvd3类型图。我将它保存在一个独立的HTML中,并将其导入到带有

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

我通过'inspect element'功能查看了Chrome和Firefox中的html源代码,发现以下对css的编辑:

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

gives:

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?

这是我想要获得的效果。但是,如果我将上面的代码插入到css中,它就不会被“拾取”。其他样式被拾取,所以正在阅读CSS,但上面的内容似乎被丢弃了。有任何想法吗?

The html figure is here: https://gist.github.com/anonymous/b187e77d795e5bf96f51

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

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:

编辑破解了这一个感谢jbaums和sal niro的暗示。这是将带有'lineChart'的rCharts nPlot转换为'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)
```

2 个解决方案

#1

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).

如果你将规则指定为!important,那么它们将不会被推翻(尽管在某些旧版本的IE中支持!important是有限的)。

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

在html文件的

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

Rendered in Chrome 39.0.2171.95 m:

在Chrome浏览器中渲染39.0.2171.95米:

And in Firefox 34.0.5 and IE 11:

在Firefox 34.0.5和IE 11中:

2 个解决方案

#1

更多相关文章

随机推荐