How do I use d3's brushing/dragging/zoom behaviors in a meteor project?

Question

I'm trying to build a souped-up force-layout graph based on this one using Meteor.js and D3.js.

Here's the problem:

In this project and in other projects involving d3 mouse-move events within a meteor framework, incorporating the mouse-event functionality causes the app to break.
By break, I mean either crash, throw errors on mouse-drags etc., or otherwise act unruly.

Two questions really:

• Why is this happening? What is causing this frustrating behavior? Is this problem fixable, or do I need to try building this app using a different framework?
• How can I prevent this behavior or get around it? I've tried building the same app using divs for graph nodes and using jquery's draggable feature to drag whem, which works great, but it's kindof a hack, because I still can't use D3 features like brushing and zooming.

Here is a link to a very-simple version of the force-layout editor being incorporated in a meteor environment. This program allows the user to drag the node, but all other functionality is lost. Dragging the single node that appears throws the following error:

Uncaught TypeError: Cannot read property 'apply' of undefined

The user is unable to select a node, draw new nodes, or do anything else that the app is programmed to do.

Answer 1

Looks like "preventing default" was the culprit...I just got my graph to select nodes and draw connections.

Here was the key to the drag line not working. It turns out that d3.svg.mouse(container) is deprecated. You're supposed to use d3.mouse now.

This is really great news, because it means d3 and meteor are more compatible than I thought.