gcalmettes / reveal.js-d3 Goto Github PK

When the runLastState argument is set to true, the last state is not triggered.

Most reveal objects support a "size to fit" / "stretch", e.g. <img> tags.

I'd love to get my d3 iframe resized to fit the available space. Is this something that can be achieved? Directly embedding the <svg> instead of via an <iframe> seems to afford this ability, but of course that's not possible using this plugin.

Any advice? Thanks!

If a slide includes fragments that are sets on elements that are not DOM elements per se (e.g: tags inside of an SVG) the plugin will break since it relies on element.className to assess whether the fragments classes have already been applied or not to an element.

Thank you for this library which opens many fin possibilities.
The demo suggests it is possible to animate vega-lite graphs but there is no example of that (there is one with semiotic). Is it really possible ? Vega-lite itself doesn't seem to support it so I'm a bit confused.

Every iframe that gets added to the background (whether from a local file, or a url), is hidden by revealJS' slide-background-content div. See the image below:

This is preventing me from interacting with the visual behind it, because each .reveal .slide-background-content is set to be 100% in width and height. I've been using a slidechanged event listener to remove this element from the background that has present set (and only when needed), but this extra div does not seem to be in place in the demo online.

I was therefore wondering what might be causing this for my version. Could it be due to the difference in revealJS versions? I'm using 3.8.0, whereas the demo is based on 3.5.0? (it seems some things have been changed, for example, there's no more head.min.js or classList.js file?

A feature request: With the addition of the viewDistance, which is great, I now run into the "issue" that some of my visuals "start their animation" before I get to the page. I'd love it if there was some sort of -1 or 0 (whatever you want to call it) transition state that runs on the slidechange event :) (going forward only I guess)

Using a background visualization that is set to use the entire window creates scrollbars in the iframe for me because it's just a little too wide and high then, which I don't want to see. (Maybe it comes from using the external plugin as well?) Could there perhaps be an option that sets the scrolling="no" attribute on the iframe?

(I've now implemented a simple data-scroll extra option in the local copy I have of the reveald3.js code, which works, but I thought it might be a nice addition generally :) )

I was having issues loading external html file due to the doesFileExist() when I tried to open the main html file directly

      <section class="fig-container" data-file="index1.html">
      </section>

I was able to workaround this by always returning resolve(true) but what do you think about a config option to disable this function?

here I highlight the dimensions of the iframe:

we can fix this by using width=100vw and height=100vh on iframe elements, but this belongs upstream to reveal.js I guess (?) https://github.com/gcalmettes/reveal.js-d3/blob/master/demo/reveal.js/js/reveal.js#L3164

For some reason the d3js figures stop rendering whenever I include the any plugins for latex in the reveal presentation, either mathjax or katex, both fail. No error messages are displayed in console. Any ideas what could be causing this issue?

Kind regards,

When I include:

<section> <div class="fig-container" data-file="plugin/reveald3/demo/d3-fig/eclipses.html"></div> <!-- path to the html file with visualization code --> </section>

The eclipse visualization loads partially off screen. When I resize the Chrome (or Safari) window, the viz shifts to center of the screen, as expected.

Any ideas what's wrong?

I would like to use reveal.js-d3 to operate diagram generation via revealjs-diagram plugin (https://github.com/teone/reveal.js-diagram-plugin). I started from a simple task to generate the root node. However, the node cannot show up. Here is my code: https://drive.google.com/drive/folders/1wnjTYvELnIj3K0FakuqftA8FTkrmgsLg?usp=sharing

Thank you!

https://gcalmettes.github.io/reveal.js-d3/demo/#/ - The demo works well on Chrome & Firefox but for some reason the iframe embed doesn't display on IE 11

A feature request. Right now the visuals are loaded when the slide comes into the screen, meaning that (when something heavy) needs load, you start out with an empty screen before the visual flashes on. I was therefore wondering if it was possible to add something akin to viewDistance from revealJS, where you could set how many slides in advance you want to have reveal.js-d3 to start loading the html file.

Not sure if this is possible because it has to be done by revealJS, but perhaps the data-preload could somehow be used from the lazy loading of iframes?

On the example slide that shows the full iframe, I can click inside of it, interact with it, and still my front and back arrows go to the next slide. However, this isn't working for my local version (and it's also not working when I load the demo from this repo and interact with the local version). Once I click inside the iframe, my keydown's aren't making the slide change. Any idea what the difference might be, how I can interact but still move to the next slide?

I do get a warning of Blocked a frame with origin "http://localhost" from accessing a cross-origin frame., even though the iframe still loads. Although I'm guessing that isn't the issue

I have a visual with several steps for which I need to load several (larger) files. When I move forward in my visual this is fine, because I can call my "initial state" function from within the code (the data reading function) itself, and it will take some seconds before I would press "next" to go to the next fragment. During this time my data will have loaded.

However, when I move backwards from the next slide, and thus the final transition triggers immediately, then my data has not yet fully loaded, before reveal.js-d3 triggers that function, and thus the final animation function gives an error, and the slide just shows the initial state.

Not a major problem, since going back is "extra" anyway, but I was wondering how you've perhaps solved this in the past? I noticed that the examples from the demo that rely on "pure" d3 all have their data hardcoded in the files, or if a file is loaded, then no transition is triggered, right? Would it perhaps be possible to add an extra slide that does show this? A big-ish dataset being loaded through some form of d3.csv() / d3.json(), adding a few transitions, having a slide after that one, and then seeing how it would work when going backward?