Published
Edited
Feb 20, 2019
2 stars
drag = {
return function(g, svg) {
g.each(function(d) {
console.log(this);
d.x = +this.getAttribute("x");
d.y = +this.getAttribute("y");
});
function dragstarted(d) {
d3.select(this)
.raise()
.classed("active", true);
}
function dragged(d, i) {
d3.select(this)
.attr("x", (d.x = d3.event.x))
.attr("y", (d.y = d3.event.y));
svg.value = g.data().map(d => [d.name, [d.x, d.y]]);
svg.dispatchEvent(new CustomEvent("input"));
}
function dragended(d) {
d3.select(this).classed("active", false);
}
const drag = d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
svg.value = g.data().map(d => [d.name, [d.x, d.y]]);
svg.dispatchEvent(new CustomEvent("input"));
return drag(g);
};
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
