是否可以在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")

如文档here中所述。我拿走了您的CSS，并将其放置在文件中，而该文件在svg中绘制的文本没有问题。

为此，我成功完成了以下工作（适应了文档中的basic example）：

chart.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")

styles.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");

这就是这种方法的样子（再次从文档改编basic example）

chart.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")

styles.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.
   });  

屈服（在默认字体和Fira Sans之间进行对比）：