图形中点的css样式答案

【问题标题】：css styling of points in figure图形中点的css样式
【发布时间】：2015-03-09 16:15:18
【问题描述】：

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

我通过“检查元素”功能查看了 Chrome 和 Firefox 中的 html 源代码，发现对 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 的提示，破解了这个。这是将带有“lineChart”的rChartsnPlot 转换为“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)
```

【问题讨论】：

您可能需要通过 JS 通过 append().attr() 函数来执行此操作
@salniro，哦，我不知道这涉及到什么！任何提示表示赞赏，谢谢。
我在 D3 中遇到了同样的问题。在JS中添加svg元素时需要做的希望你能找到！
谢谢，当我检查代码时，我可以看到 svg 元素，所以我会看看它是否能帮到我。另外，我正在读这个：stackoverflow.com/questions/710275/…，但我一点也不聪明。

标签： html css r r-markdown

【解决方案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 中渲染：

在 Firefox 34.0.5 和 IE 11 中：

【讨论】：

哈哈我看到的时候一直以为那只是用户评论
@jbaums，谢谢！确实，这行得通（我花了一点时间来测试我只能让它在<style>之间的html内部工作，并且由于某种原因不能让它在css内部工作（尽管这可能是我忽略的事情） ). 现在我正在尝试研究如何生成嵌入该样式的 html 图形，但我想这是一个单独的问题！

【解决方案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”将选择所有 d3 折线图的点 XYZ。因此，如果您的应用程序中有多个图表，请不要忘记使用图表的 HTML id 或其他方式调整选择器。

【讨论】：