search

n-riesco / ijavascript

IJavascript is a javascript kernel for the Jupyter notebook
Other
2.18k stars 187 forks source link

$$.svg in JupyterLab #170

Closed Bluejay47 closed 2 years ago

Bluejay47 commented 6 years ago

I am not even sure this is supposed to work so I apologize if this post is off topic.

The following code

var fs = require('fs');
var d3 = require('d3');
var jsdom = require('jsdom');
var { JSDOM } = jsdom;

var document = new JSDOM("<html><body></body></html>");
var svg = d3.select(document.window.document.body).append("svg");

svg.append("rect")
    .attr("width", 80)
    .attr("height", 80)
    .style("fill", "orange");

$$.svg("<svg>" + svg.html() + "</svg>");

Generates a rectangle as expected in Jupyter Notebooks, but generates a broken image icon in JupyterLab.

Am I doing something incorrectly or is this a compatibility issue with JupterLab?

Thanks,

Morikko commented 5 years ago

I confirm the problem on Mac with jupyter-lab 0.35.4 and ijavascript-await on node 10.12.

capture d ecran 2018-11-18 a 23 24 55
n-riesco commented 5 years ago

This may be an issue recently fixed in JupyterLab (see https://github.com/jupyterlab/jupyterlab/pull/5610).

rudifa commented 3 years ago

@n-riesco @Morikko

Same problem here and now, on a fresh install of Anaconda3 with jupyter-lab and ijavascript(installed per In macOS, Homebrew and pip can be used to install IJavascript and its prerequisites: instructions.

$$.svg("<svg><rect width=80 height=80 style='fill: orange;'></svg>"); // does not work - broken image icon

$$.html("<svg><rect width=250 height=25 style='fill: orange;'></svg>") // workaround - orange square as advertised

macOS 10.15.7 (19H2)
jupyter-lab --version : 2.2.6
ijsinstall --version: 5.2.0
Screenshot 2020-10-31 at 23 10 28
n-riesco commented 2 years ago

I'm closing, as $$.html works around the issue, and https://github.com/jupyterlab/jupyterlab/pull/5610 suggests the decision to skip rendering SVG elements is deliberate.