Question

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

enter image description here

我通过'检查元素'功能查看了Chrome和Firefox中的html来源，发现对css进行了以下编辑：

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

给出：

enter image description here

这是我想要获得的效果。但是，如果我将上述代码插入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，那么他们以后就不会被推翻（尽管在某些旧版本的IE中对!important的支持有限）。

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

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

在Chrome 39.0.2171.95 m中呈现： enter image description here

在Firefox 34.0.5和IE 11中： enter image description here

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样式。注意：选择＆nbsp-point-XYZ＆＃39;将选择所有d3折线图的XYZ点。因此，如果您的应用程序中有多个图表，那么请不要忘记使用图表的HTML ID或任何其他图表来调整选择器。

css造型图中的点

2 个答案: