X3Dom: node().runtime is undefined?

i’m trying to use this example of 3d plotting as my entry into the observable experience. it defines an x3d object, a call to x3d.node() returns an object, but x3d.node().runtime is undefined? any clues why that would be?

this sample code seems to assume an earlier version of d3 (eg, i had to change d3.scale.linear to d3.scaleLinear), and this issue may be similar?

1 Like

I assume you saw that x3d is from https://www.x3dom.org/ (not related to d3). That package may have changed quite a bit since that example was created (in 2015)

hi @Cobus , i did notice that it dependency, and have a line

x3dom = require “http://x3dom.org/x3dom/dist/x3dom-full.js

that brings it into observable (i think?).

if there is a recent, more pure d3 example of 3d plotting i’d be very intererested.

I’ve used X3Dom a lot in Observable and I think it’s a natural fit. Generating 3D graphics by manipulating X3D via D3 feels a lot like generating 2D graphics by manipulating SVG in the same way, though there are certainly some difference as X3D/X3Dom just isn’t as integrated into Observable or even a standard web page, the way that SVG/D3 are.

Here are a couple examples of X3D on Observable:

I’ve also got a whole collection of things that I’ve created using a library built on top of X3Dom:

Finally, the code you point to does indeed have some incompatibilities with newer versions of D3. Here’s a version using a D3 V3 that works but seems to be missing some detail:

1 Like

thanks lots @mcmcclur ! your collection will keep me busy learning for some time! trying to target appropriate versions of d3 seems like a challenge all by itself, but your working update makes it seem like the answer to my current question. thanks again.

1 Like

Yes. In fact, the grid did not appear due to the fact that the grid lines are polyline2d objects that aren’t included in the standard x3dom distribution but only as part of x3dom-full. I modified the code to require x3dom-full and it now works perfectly.

In addition, here’s a version that mostly works with the latest edition of D3. The axes don’t show up in this version, though, and I’m not sure why:

the changes I see you made to use the current d3 version were:

<     .append("orthoviewpoint")
<     .attr("fieldOfView", [-5, -5, 15, 15])
<     .attr("orientation", [-0.5, 1, 0.2, (1.12 * Math.PI) / 4])
<     .attr("position", [8, 4, 15]);
>     .append("viewpoint")
>     // .attr("fieldOfView", [-5, -5, 15, 15])
>     .attr("orientation", "-0.60226 0.78264 0.15736 0.84888")
>     .attr("position", "20.03316 18.73620 21.64114");

<     var scale = d3.scale
<       .linear()
>     var scale = d3
>       .scaleLinear()

<       .ease(ease)
>       .ease(d3.easeLinear)

your final version (“scene 3”) solved the flickering/refresh bug i was having, so i’ll do without the axes showing, for now:) thanks again.

If you use a code block the diff will render much better. You can do that with the “preformatted text” button in the toolbar.

1 Like

thanks @mythmon fixed it!

Yes - that’s correct. The change in the viewpoint was not really necessary; it was really just my personal preference and I didn’t actually mean to leave that change in there. :slight_smile:

Here’s a reproduction of the animation built with PlotX3D:

1 Like