css 图中点的样式

Question

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

我通过 '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;
}

给出：

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

html数字在这里：https://gist.github.com/anonymous/b187e77d795e5bf96f51

EDIT 由于 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 中受到限制）。

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

.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 中：

Answer 2

如何突出显示单个点

我正在研究如何突出显示线内单个点的解决方案并想分享它，因为我还没有找到类似的东西：

var highlightSinglePoint = function(point){
    var selector = 'nv-point-'+point;
    var x = document.getElementsByClassName(selector);
    x["0"].style["fillOpacity"] = "1";
    x["0"].style["strokeWidth"] = "5px";
    x["0"].style["strokeOpacity"] = "1";
}

您可能还想在最后突出显示的点上重置这些 css 样式，然后再突出显示另一个点。注意：选择 'nv-point-XYZ' 将 select 指向所有 d3 折线图的 XYZ。因此，如果您的应用程序中有多个图表，请不要忘记使用图表的 HTML id 或其他任何内容来调整 selecter。

css 图中点的样式

css styling of points in figure

html

css

r

r-markdown