nvd3散点图在R中如何使用rCharts:如何增加标签的字体大小?

3

我尝试增加使用NVD3和rCharts创建的图表的x轴和y轴字体大小。以下是我的图表代码。感谢任何帮助。

n1 <- nPlot(pValues~Chr,data=dat,type="scatterChart",height=400,width=750)
n1$chart(tooltipContent= "#! function(key, x, y, e){
         return '<b>ID:</b> ' + e.point.ID
         } !#")
n1$chart(forceY = c(0,8))
n1$chart(forceX = c(0,10))
#n1$chart(color = '#! function(d){return d.pValues} !#')
n1$xAxis(axisLabel = 'Chromosome')
n1$yAxis(axisLabel = '-log P value')

现在最简单的方法是按照https://dev59.com/4nTYa4cB1Zd3GeqP0fDY中的方式添加CSS,但我知道这可能不是可行的解决方案。我将尝试另一种方法,并提供一个可以直接从R中使用的答案。 - timelyportfolio
1个回答

6

其实,我认为通过这个stackoverflow的讨论,我发现了一个解决方案。如果这个方案对你有用,请告诉我。将font-size更改为您想要的任何大小。您还可以提供完整的CSS以更改样式、位置、颜色等。

dat <- data.frame(
  pValues = runif(20,0,5),
  Chr = 1:20,
  ID = sample(LETTERS[1:20])
)

n1 <- nPlot(pValues~Chr,data=dat,type="scatterChart",height=400,width=750)
n1$chart(tooltipContent= "#! function(key, x, y, e){
     return '<b>ID:</b> ' + e.point.ID
     } !#")
n1$chart(forceY = c(0,8))
n1$chart(forceX = c(0,10))
#n1$chart(color = '#! function(d){return d.pValues} !#')
n1$xAxis(axisLabel = 'Chromosome')
n1$yAxis(axisLabel = '-log P value')
n1

n1$setTemplate(afterScript = '<script>
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".nv-axislabel { font-size: 15px; }";
  document.body.appendChild(css);
</script>'
)
n1

n1$chart(margin = list(left=100)) 
n1

### as stated in comments, x is basically unworkable but this kind of works

n1$xAxis(
  axisLabel = 'Chromosome'
  ,tickFormat = "#!function(d){return d + "        " }!#"  #add space to the number
  ,rotateLabels=90                                         #rotate tick labels
)
n1$setTemplate(afterScript = '<script>
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".nv-x .nv-axislabel { font-size: 50px; }";
  document.body.appendChild(css);
  css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".nv-y .nv-axislabel { font-size: 50px; }";
  document.body.appendChild(css);
 </script>'
)
n1$chart(margin=list(left=100,bottom=100))
n1

谢谢您的回答,这对我有用,但现在我又遇到了另一个问题。轴标签超出了绘图区域,所以我现在必须定义绘图边距。你能帮我吗?我擅长R,但不懂JavaScript或HTML。 - Koundy
对于 y,解决方案非常简单:n1$chart(margin=list(left=100)),只需更改 100 的大小即可。我仍在解决 x,因为显然的方法不起作用,例如 n1$chart(margin=list(left=100,bottom=100)) - timelyportfolio
我实际上找不到一个好的处理x的方法,因为nvd3不允许设置它。另外,我可以在脚本中手动更改,但它会在任何调整大小事件中被改回来。只是为了展示一些可行的东西,但我认为不可接受,我在之前的答案中添加了更多的代码来旋转带有空格的x刻度标签,但我并不真正认为这是可行的。 - timelyportfolio

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接