r - 是否有可能将导入的字体与 r2d3 一起使用？

Question

我在 R 中使用 r2d3 库制作 d3 绘图并尝试更改字体。不幸的是，最后渲染的总是 Arial。有什么行之有效的方法可以让它发挥作用吗？

我在连接到 js 文件的 css 文件中试过这个：

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
text {
    font-family: "Fira Sans", sans-serif;
    fill: #371ea3;
    color: #371ea3;
}

添加 !important 没有帮助。

字体系列正确更改为“Fira Sans”，但在计算部分我可以看到呈现的字体是 Arial。

Answer 1

您可以将 css 文件用于：

r2d3(data, script = "script.js", css = "styles.css")

正如这里的文档中所述。我拿走了你的 css 并将它放在一个文件中，对于在 svg 中绘制的文本没有问题。

这样我就成功了以下（改编文档中的基本示例）：

图表.r：

library(r2d3)
data <- c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
r2d3(data, script = "chart.js", css="styles.css")

样式.css：

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
text {
    font-family: "Fira Sans", sans-serif;
    fill: #371ea3; /* no need for 'color' */
}

和chart.js：

var barHeight = Math.floor(height / data.length);
svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');

svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .attr('x',20)
  .attr('y', function(d,i) { return i * barHeight + 30})
  .text(function(d){ return d; })

给予：

---

我还成功地减少了仅指定字体的 css 文件：

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');

然后使用selection.style/attr样式设置文本：

 selection.attr('font-family', "FontFamilyName"); // or:
 selection.style('font-family', "FontFamiliyName");

这就是这种方法的样子（再次改编文档中的基本示例）

图表.r：

library(r2d3)
data <- c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
r2d3(data, script = "chart.js", css="styles.css")

样式.css：

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');

和 chart.js（基于 api 文档上的基本介绍性示例）：

var barHeight = Math.floor(height / data.length);
svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');

svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .attr('x',20)
  .attr('y', function(d,i) { return i * barHeight + 10})
  .text(function(d){ return d; })
  .style('font-family',function(d,i) {
      if(i%2 == 1) return 'Fira Sans'; else return ''; // for contrast.
   });  

Yielding（在默认字体和 Fira Sans 之间交替进行对比）：