Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
plotly.js in node (WIP)
node_modules
npm-debug.log*

Observations

  • something is up with selector containing not e.g. 'path:not([d])'
  • must remove getComputedTextLength method in Plots.addLinks
  • must shim XMLSerializer (wait for jsdom to natively support it)
  • some problem with canvas maybe??
    • toImage with non-svg format result in Segmentation faults
var fs = require('fs');
var path = require('path');
var jsdom = require('jsdom');
var PATH_TO_PLOTLYJS = require.resolve('plotly.js/dist/plotly.js');
var plotlySrc = fs.readFileSync(PATH_TO_PLOTLYJS, 'utf-8');
var html = `
<body>
<div id="graph"></div>
</body>`;
var data = [{
x: [1,2,3],
y: [2,1,2],
mode: 'markers',
marker: {
size: 20,
color: 'green'
}
}];
var layout = {
};
var config = {
showLinks: false
}
var imageOptions = {
format: 'svg'
};
var OUTFILENAME = path.join(__dirname, 'out.' + imageOptions.format);
var virtualConsole = jsdom.createVirtualConsole();
virtualConsole.on('log', (message) => {
console.log('console.log called ->', message);
});
virtualConsole.on('jsdomError', (message) => {
console.error('Error ->', message);
});
jsdom.env({
html: html,
src: [plotlySrc],
// Taken from: https://gist.github.com/hugolpz/1c34e14d8b7dd457f802 (you
// need query selector for D3 to work)
features: { QuerySelector: true },
virtualConsole: virtualConsole,
done: main
});
function main(err, window) {
if(err) throw err;
var document = window.document;
var Plotly = window.Plotly;
var d3 = Plotly.d3;
var gd = document.getElementById('graph');
// mock XML Serializer (for now)
window.XMLSerializer = function() {
return {
serializeToString: (node) => {
return String(node.outerHTML)
}
};
};
Plotly.plot(gd, data, layout, config).then((gd) => {
return Plotly.toImage(gd, imageOptions);
})
.then((img) => {
var svg = decodeURIComponent(img.replace(/^data:image\/svg\+xml,/, ''))
fs.writeFile(OUTFILENAME, svg, (err) => {
if(err) throw err;
console.log('done');
})
})
.catch((err) => {
console.log(err)
})
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
{
"name": "plotly-in-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "Étienne Tétreault-Pinard",
"license": "MIT",
"dependencies": {
"canvas": "^1.6.5",
"jsdom": "^9.12.0",
"plotly.js": "^1.25.1"
}
}
@RedShift1

This comment has been minimized.

Copy link

RedShift1 commented Aug 16, 2017

Doesn't work anymore with JSDOM v10, API has changed.

@etpinard

This comment has been minimized.

Copy link
Owner Author

etpinard commented Dec 29, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.