Question

我继承了一个Node.js项目，该图项被破坏了。

图表功能正在使用"d3": "^3.5.2"，而且只是挂在了需求上。

我挖了contextify和JSDom后发现问题，然后找到了solution。它不再挂起，但它没有正确地写出图形。

使用child_process将svg转换为png，结果只是一条奇怪的小垂直线。

我已经发布了下面的代码（为简洁起见，简化了绘制功能的内容）。

如果我取消注释For debugging行，那么图表会完美显示，它会在转换中丢失一些内容。

这对我来说是一种新鲜事，而且我有点紧张，所以我希望看到是否有人发现了一个明显的问题，或者能指出我正确的方向。

非常感谢任何帮助。

StashModel.afterRemote('prototype.dataPointsGraph', function (ctx, unused, next) {
  var res = ctx.res,
      req = ctx.req,
      fs = require('fs'),
      StorageService = require('loopback-component-storage').StorageService,
      handler = new StorageService({provider: 'filesystem', root: res.locals.filePathRoot}),
      child_proc = require('child_process'),
      convert = child_proc.spawn("convert", ["svg:", "png:-"]);

  var d3 = require('d3'),
      jsdom = require('jsdom');

  var document = jsdom.jsdom();

  drawWaveFormGraph = function (rawData, pointFormatCb) {
    //this is a large and glorious function that successfully returns
    //the graph svg
    return d3.select(document.body).node().innerHTML;
  };

  convert.stdout.on('data', function (data) {
    res.write(data);
  });

  convert.stderr.on('data', function (data) {
    console.log(data);
  });

  convert.on('exit', function (code) {
    res.end();
  });

  var fileName = res.locals.fileAbsPath;
  fs.exists(fileName, function(exists) {
    if (exists) {
      fs.stat(fileName, function(error, stats) {
        fs.open(fileName, "r", function(error, fd) {
          var buffer = new Buffer(stats.size);
          fs.read(fd, buffer, 0, buffer.length, null, function(error, bytesRead, buffer) {

            var csv = buffer.toString("utf8", 0, buffer.length).split('\n');
            var svg = drawWaveFormGraph(csv, function (record) {
              var fields = record.split(',');
              return {
                time: Math.floor(parseInt(fields[0], 10)/1000000),
                xAccel: parseFloat(fields[1]),
                yAccel: parseFloat(fields[2])
              };
            });

            // For debugging
            // res.write('<html><body>' + svg + '</body></html>');
            // res.end();

            res.set({'Content-Type': 'image/png'});
            convert.stdin.write(svg);
            convert.stdin.end();

            fs.close(fd);
          });
        });
      });
    }
  });

});

********** EDIT *************

我在convert.stderr.on('data')函数中遇到错误。他们是：

转换：无法读取字体`（null）'@ error / annotate.c / RenderFreetype / 1315。

转换：不符合图形的原始定义`text'@ error / draw.c / DrawImage / 3169。

使用`child_process`将svg转换为png时遇到麻烦

0 个答案: