Есть ли возможность использовать импортные шрифты с r2d3? - PullRequest
Новая
       61

Есть ли возможность использовать импортные шрифты с r2d3?

1 голос
/ 25 марта 2019

Я делаю графики d3 с библиотекой r2d3 в R и пытаюсь изменить шрифт.К сожалению, это всегда Arial, который делает в конце.Есть ли проверенный способ заставить его работать?

Я пробовал это в css-файле, связанном с js-файлом: 

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

Добавление! Важный не помогает.

Семейство шрифтов корректно меняется на «Fira Sans», но в разделе «Вычисленные» я вижу, что отображаемый шрифт - Arial.

1 Ответ

1 голос
/ 26 марта 2019

Вы можете использовать файл css с: 

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

Как отмечено в документации здесь . Я взял ваш CSS и поместил его в файл без проблем для текста, нарисованного в SVG.

С этим я справился со следующим (адаптируя базовый пример из документации):

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

Предоставление:

enter image description here

У меня также был успех с уменьшенным 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");

А вот как выглядел этот подход (снова адаптируя базовый пример из документации)

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

Yielding (чередование шрифта по умолчанию и Fira Sans для контраста):

enter image description here

...