Example 3D scatter plot implemented using d3 and x3dom.
This example uses FileReader to process a local file instead of one provided by the server. To demonstrate, click "Choose File" and select a file. It will succeed on Chrome and Firefox, but not Internet Explorer (even a recent version).
In IE, an "Access is denied" error occurs when calling request.open() in d3_xhr.send() which occurs when calling d3.csv() with the data URL.
Can anyone suggest how to fix this for IE?
Edit: Found a workaround by using FileReader.readAsText() instead of readAsDataURL().
This document contains two x3dom nodes from the x3dom "Hello World" example. The first instance is created at the top-level document. The second instance is created in a callback, and therefore requires a call to x3dom.reload() to render. (Thanks to windhof@yahoo.com for fixing the original example.)
Testing D3 mouse events with X3dom elements.
The x3dom canvas captures onclick events, so just defining a 3d event handler on an x3dom element does not work. Hence, clicking the red cube does nothing.
A workaround is to define an onclick handler which calls the 3d 'click' event handler with the event, as demonstrated by clicking on the blue sphere. Note that x3dom event members differ from d3's, so d3.mouse() function does not work.
Another solution, applied to the green cone, is to call addEventListener("click",...).
Using attrtween
to affix an svg element to an svg path undergoing transition.
In order to compute its position, 1/3 of the way along the path, the element binds the path as data. (See var linkLabel
, toward the end of the javascript file.) Then it uses attrTween
(not attr
) to fetch the correct position at each animation frame during the transition.