d3-drag | drop SVG , HTML or Canvas using mouse | Widget library

Observablehq loads the standard library, which provides the invalidation method. According to the documentation, invalidation is...

A promise that resolves when the current cell is re-evaluated: when the cell’s code changes, when it is run using Shift-Enter, or when a referenced input changes.

This notebook explains it in details: https://observablehq.com/@observablehq/invalidation

The error you get when you use the non-minified version of d3 is view is undefined. This is because d3 expects some custom attribute view to be present, which you can't add through the testing library, because it's not in the list of curated events. However, you can just use vanilla JavaScript on this one if you'd like:

If you don't need to generate any actual event data, and I understand the question correctly, you can do this relatively easily without d3.dispatch directly. The below will give you this and the node data itself (in d3v5 it will also give you i and nodes).

D3v5 and earlier

In d3v5 and earlier, the signatures for a function passed to selection.each() and drag.on() were the same. In this case you can easily assign the function to a variable and pass it to both. Alternatively, you could access the drag event function with drag.on("typeName").

Here's a quick example:

The container element only determines the coordinate system of the event.x and event.y coordinates. That would be useful if, for instance, your draggable circle were being positioned relative to another element using the "dx" and "dy" attributes supported by some SVG elements. However, container() will not serve to automatically constrain event.x and event.y to fit within a given element's visual bounds.

To elaborate upon Ouroborus's comment: You have the following lines in your drag event handler:

I think you are hitting issue #751

This occurs from core-js 3.6.0, when two different versions of the polyfill are loaded. Currently the issue is still open, so solutions at the moment would be to make sure no two versions are loaded, or downgrade to <3.6.0.

The following may help identify the different versions of core-js in your dependency tree:

I was unable to get it working using Line object, but if I use LineSegments and push all pairs of vertices to one Geometry, it is working well.

So in function buildScene I use instead of

You can create another zoom behavior which only changes the Y domain. Then, in the drag handler, call the new behavior's scaleBy on the plot area with a scale factor based on the drag event's delta Y:

I think this will do the trick for you

Use the second and the third arguments together to get this when this is not available: