Eye and Mouse tracking on SVG?

[madebyafox]

Hi folks!
I've got a study that renders a d3 visualization via SVG, and I'm trying to use the mouseTracker and webGazer extensions. I notice that in both cases, when I pass in the id of the SVG element on the trial, I don't get bounding box data in the output.

For example:

..in my trial..
extensions: [ {type: jsPsychExtensionMouseTracking, params: { targets:['#testingButton','#leftDiv','#rightDiv','#theGraph'], events: ['mousemove','mousedown'] }},

is meant to track an svg element with the (illustrious) ID "theGraph"
svg = d3.select(".stimulus").append("svg") .attr("id","theGraph") .attr("class","theGraph")
The svg element appears correctly in the DOM with the id = theGraph.

But in my mouse tracking data, I only get the bounding boxes for the Div and button elements:
"mouse_tracking_targets": { "#testingButton": { "x": 0, "y": 0, "width": 0, "height": 0, "top": 0, "right": 0, "bottom": 0, "left": 0 }, "#leftDiv": { "x": 0, "y": 304.1484375, "width": 656.6015625, "height": 155.6953125, "top": 304.1484375, "right": 656.6015625, "bottom": 459.84375, "left": 0 }, "#rightDiv": { "x": 656.6015625, "y": 0, "width": 281.40625, "height": 764, "top": 0, "right": 938.0078125, "bottom": 764, "left": 656.6015625 }

Ideally I want to pass in ids for parts of the visualization itself (inside the SVG).

Has anyone else encountered this? Or can spot an issue with my syntax?
Anyone else using jsPsych for data visualization studies?