Embeding raw svg

Community Help
1

I sorry for the amateurism of this question but how would you go about using the observable runtime to insert a g element from a notebook into a svg tag existing elsewhere ?

I think this would be the solution to my resizing problem as I would have more control on the svg viewBox attribute.

2

One would have to implement his own observer is the following way

...
componentDidMount() {
    // create or use an existing svg node
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "100%");
    svg.setAttribute("height", "300");
    svg.setAttribute("id", "svgcontainer");
    svg.setAttribute("ref", this.chart_Ref);
    mountNode.appendChild(svg);  // append it somewhere, here to the React Root defined earlier

    runtime.module(define, name => {
	if (name === "g_cell") {
// return a custom observer.   This one is just returning the `.node()` of the g_cell variable. g_cell is the name of the cell in the notebook (`define`) that is displaying the raw `g`
            return {
		fulfilled: value => {
		    svg.appendChild(value.node());
		}
            };
	}
    });
}
...
1 Like