Working on a D3, React, Redux web app and running into an interesting bug when rendering an SVG containing a bunch of rectangles.
Application Summary
We use a D3 Partition Layout to generate a huge (~3000) list of nodes to set the appropriate layout attributes (x, y, dx, dy).
We use React/Redux for the rest of the application to store this state and ultimately render an SVG for the chart.
Problem
Some nodes (rendered as rects) in the rendered SVG simply don't show up!
Theories
Originally, we thought we had a bug with how we were generating the rectangles, but this turned out not being the case (Rects exist in the dom with the right attributes).
We are rendering other things in addition to the rects, so we thought those were conflicting when the browser painted everything. That seemed to not be the case since we disabled all of these other items and we're still seeing the issues.
It could be a browser bug when it comes to rendering rects. Our app currently doesn't even render properly when on Firefox, so it may be something to do with how we are generating the SVG.
Example
Here are some examples of what we are talking about.
Here's an example of the chart being rendered properly with all of its nodes.
Here's an example of the chart rendering with part of its nodes missing:
Here's an example of the same chart magically breaking after we alt tabbed a few times:
Questions
What we're looking for is any ideas from people more experienced with SVG rendering for what we could be looking into. There are a bunch of possibilities, but we're not sure which direction we should be looking into.
Thanks!
Related
We currently use the model derivatives API to upload 3D models and later visualize them in a browser with the Autodesk Viewer v7 (previously Forge Viewer).
For different reasons we have been trying to hide and show parts of the model, but to do so in some cases we need to be able to hide geometric pieces of some elements while still being able to see the rest. For example if we had an element in gray (see image below) we would like to make the part of the element in red transparent.
I have looked into the Viewer API docs and there are functions that allow showing and hiding complete elements, but not cutting elements along a custom path.
While the docs mention the overlay functionality which enables us to add custom geometries by interacting with the THREE library that the Viewer runs on, drawing a copy of the whole model seems inefficient and prone to giving bad results.
Searching in SO I found that the THREE v71 library (which is the version the Viewer uses) has the possibility of occluding elements with the colorWrite option. See these links for reference:
three.js transparent object occlusion
Occlusion of real-world objects using three.js
I tried implementing something similar by using the colorWrite key when creating a new Three Material in an overlay, but nothing happens. This makes me think that either the Autodesk Viewer overwrites the render order (which makes sense) or openly ignores the colorWrite option. Does anyone know why and if there is a workaround for this? Or does anyone know if there is another way to cut an element that I'm not considering?
Please note that we have to do this with multiple elements at the same time and that reuploading the model periodically is not an option for us.
I got the following feedback:
The approach linked in the SO thread doesn't work, because we ignore both the colorWrite material property and the renderOrder mesh property. I also think that the approach would not work as expected in general, because using an invisible object to occlude a part of another object would always be view-dependent, and also occlude other objects in the background (so it wouldn't just 'cut out' a part of a single object).
Generally, this is not really a use-case for LMV, because it's a viewing tool, not a solid modelling tool.
Cut planes might help to get some of what you want, but they also have limitations:
It's possible to define multiple section planes to construct a 'shape' (that's also what the section box does internally). But since they are infinite, you wouldn't be able to cut away parts of one object, but not other objects (or other parts of the same object that intersect the cutplane). They're also designed to be 'outward' facing. The section box, for example, can only be used to narrow the scene down to some elements of interest. It's not possible to do the opposite, i.e. cut out some inner part of the design and keep everything around it.
This is what the section box could offer:
We are working on a meta analysis about lizard niches and convergent evolution, and created a 3d plot with PCA scores, were dots are lizard species from 24 different families.
We decided to use our 3d plots as supplementary material for our manuscript because there are very interesting patterns that are obscured when plotted in 2 dimensions. For example, all nocturnal species stick together, and are separated from the rest in the third plane.
So, to make the figures really useful, I wanted to include some controls to turn some objects on/off (like lizard families, or ellipsoids, or functional groups). I tried using Plotly, that gives you very nice and interactive plots, but symbols in Plotly are limited to only five for 3D plots.
I finally did it with R using the rgl package. I had to create new symbols by overlapping pre-existent ones, but and at the end I got what I needed.
I followed an online tutorial to create interactive controls (https://cran.r-project.org/web/packages/rgl/vignettes/WebGL.html) that can be embedded in html, and with a lot of effort I got those controls working. The problem is that it only works in my computer, only in Chrome (does not work in Firefox, nor Safari). I asked one of the creators of the package and he told me that the tutorial was intended to be use with markdown, and given I changed the html code, the weird behavior was not surprising.
After that I learn some Rmarkdown and html to better understand the tutorial, and re-do the code. Now I have the plots and I have the buttons, but when I compile the script using Knitr, the buttons don't work. Some of them do nothing, some others turn on different set of points.
I am sorry for the length of this post, but I really tried everything and I can't find a solution.
Here is a link to a sample of my dataset, my R script, and the HTML generated using Knitr: https://drive.google.com/open?id=0B-fCxMGN3utrbWgtZzhWYVpxSjg
Thank you so much in advance!
The issue is that there are at least two different schemes for embedding rgl scenes in a web page and for linking a button to the rgl scene, and you're mixing them without providing the "glue" to make them work together.
An rglwidget() always has an elementId. Normally it's some random string, but if you want to refer to that scene, you should specify one.
The toggleButton() function uses the older scheme for inserting the scene into your web page. So you need to translate the elementId to the prefix that it uses.
So try something like this:
```{r results='asis'}
library(rgl)
x <- plot3d(rnorm(10), rnorm(10), rnorm(10))
rglwidget(elementId = "theplot")
elementId2Prefix("theplot")
toggleButton(x["data"], prefix = "theplot")
```
We have done a visualization, mostly in D3 and we would like to generate a nice pdf of it to benefit from vector rendering rather than doing a mere screenshot.
It can be seen at:
http://www.bonneel.com/prot/prot2/
I also saw Sergiy's tutorial on producing pdfs out of D3 visualizations. However, his technique works if there is a single svg element (and I didn't manage to extend it to the multiple views we have), and actually produces a strange output in our case
See below for a screenshot of what it produces : the grey background is outside of the clipping area, and is just shown to illustrate that in addition to the view being incorrectly black (and doesn't show the entire visualization), it also extends outside of the clipping area with strange artifacts.
I understand that some elements might not be possibly converted to vector graphics (e.g., the 3D view), but having a screenshot that is mostly vector graphics would be nice (e.g., all the div elements that contain SVG shall be represented in vector format, and only the 3D view rasterized).
Any idea ?
Hopefully the SVG Crowbar can help you. I've used it before and it picks up most of the styles, though you have to read the warnings at the bottom.
Once you have your SVG image (with styles!) you should be able to open in Fireworks or Illustrator and export to vector PDF.
What is the correct approach if you plan to implement a (complex, interactive) network diagramm in "HTML5", which is part of a modelling tool - for example to let the user design a workflow?
Is SVG the right approach or using directly Javascript/Canvas?. Is there any productive application out there, which has proved that this is doable in HTML5 (the network model can be quite complex), especially regarding performance?
I do not need any implementation details, just a hint to the 'correct' technology if you would be 'forced' to do this in HTML5...
Thanks.
svg now has support from ie9. canvas is supported in most modern browsers and css is supported by all.
svg has the advantage of beeing scalable (the 'image' is a vector map, so the user can have it in every size he prefers), but the performance of beeing rendered is a bit crappy. You can bind some events to the elements..
canvas is like GDLib or ImageMagick, you have a white sheet, where you can plot onto. So if you do a change, you first have to clear the canvas and redraw everything. You don't know onto what element a user has clicked onto and only can bind events generally for the whole canvas element.
Using HTML and the DOM with CSS would be an alternative, since you just could start moving elements of the network arround and can bind events to nodes of your network. But lines are quite hard to implement (can use a rotated div with top-border)
I personally would go for a hybrid between svg and plain html, but then again, I don't know every use-case of your application.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/