Развертывание на стороне сервера с использованием Node.js не дает надлежащих SVG - PullRequest
Новая
       11

Развертывание на стороне сервера с использованием Node.js не дает надлежащих SVG

0 голосов
/ 05 марта 2019

Это связано с вопросом, который я задал здесь . Одним из решений было создание растрового изображения, и я пытаюсь сделать это, предоставляя сервис, который возвращает строку SVG из nodejs. Я следовал за документом, данным здесь . Он возвращает ответ с SVG-контентом, но svg-контент кажется неправильным.

Код NodeJS 

const express = require('express');
const vega = require('vega');
const app = express();
app.get('/vega', (request, response) => {

  const spec = JSON.parse(request.query.spec);

  const view = new vega.View(vega.parse(spec), {
    logLevel: vega.Warn,
    renderer: 'none'
  });

  const svgResult = view.toSVG();

  svgResult.then(function(res){
    response
    .set('Cache-Control', `public, max-age=${60 * 60}`)
    .type('svg').send(res);
   }).catch((err) => console.log("rejected:", err));

});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

Пример запроса на звонок 

http://localhost:3000/vega?spec=%7B%0D%0A++%22description%22%3A+%22A+simple+bar+chart+with+embedded+data.%22%2C%0D%0A++%22data%22%3A+%7B%0D%0A++++%22values%22%3A+%5B%0D%0A++++++%7B%22a%22%3A+%22A%22%2C%22b%22%3A+28%7D%2C+%7B%22a%22%3A+%22B%22%2C%22b%22%3A+55%7D%2C+%7B%22a%22%3A+%22C%22%2C%22b%22%3A+43%7D%2C%0D%0A++++++%7B%22a%22%3A+%22D%22%2C%22b%22%3A+91%7D%2C+%7B%22a%22%3A+%22E%22%2C%22b%22%3A+81%7D%2C+%7B%22a%22%3A+%22F%22%2C%22b%22%3A+53%7D%2C%0D%0A++++++%7B%22a%22%3A+%22G%22%2C%22b%22%3A+19%7D%2C+%7B%22a%22%3A+%22H%22%2C%22b%22%3A+87%7D%2C+%7B%22a%22%3A+%22I%22%2C%22b%22%3A+52%7D%0D%0A++++%5D%0D%0A++%7D%2C%0D%0A++%22mark%22%3A+%22bar%22%2C%0D%0A++%22encoding%22%3A+%7B%0D%0A++++%22x%22%3A+%7B%22field%22%3A+%22a%22%2C+%22type%22%3A+%22ordinal%22%7D%2C%0D%0A++++%22y%22%3A+%7B%22field%22%3A+%22b%22%2C+%22type%22%3A+%22quantitative%22%7D%0D%0A++%7D%0D%0A%7D

Пример ответа 

<svg class="marks" width="0" height="0" viewBox="0 0 0 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(0,0)"><g class="mark-group role-frame root"><g transform="translate(0,0)"><path class="background" d="M0,0h0v0h0Z" style="fill: none;"></path><g></g></g></g></g></svg>

Ценю любую помощь, чтобы найти, что здесь не так.

1 Ответ

0 голосов
/ 06 марта 2019

Получилось работать с несколькими исправлениями в приведенном выше коде. 

const express = require('express');
const vega = require('vega');
const app = express();
app.get('/vega', (request, response) => {

  const spec = JSON.parse(request.query.spec);
  getSVG(spec, response);
  // let res = render(spec, response);
  // console.log('response', res);

});

async function getSVG(spec, response) {
  const view = new vega.View(vega.parse(spec), {
      loader: vega.loader(),
      logLevel: vega.Warn,
      renderer: 'none'
    })
    .initialize()
    .finalize();

  return (view.toSVG(1))
    .then(_ => {
      //console.log(_);
      console.log("Processed SVG request at -", Date.now()); 
    response
    .set('Cache-Control', `public, max-age=${60 * 60}`)
    .type('svg').send(_); 
  });
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Listening on ${PORT}`));
...