使用 Node.js 的服务器端部署未提供正确的 SVG

Question

这与我问的问题 . One of the solutions was to create a bitmap and I'm trying to do that by exposing a service which returns SVG string from nodejs. I followed doc given here 有关。它正在返回包含 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>

感谢任何有助于找出问题所在的帮助。

Answer 1

在上面的代码中进行了一些修复后，它就可以正常工作了。

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

使用 Node.js 的服务器端部署未提供正确的 SVG

Server-Side Deployment using Node.js not giving proper SVG

vega

vega-lite