{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);
// offset represents the delta between the click/touch point
// and the x-y coordinates of the circle
let offset = { x: 0, y: 0 };
// dragStart is called once
function dragStart() {
// Set the offset values
offset.x = d3.event.x - d3.select(this).attr('cx');
offset.y = d3.event.y - d3.select(this).attr('cy');
}
// drag is called continuously
function drag() {
// Set the value of the circle coordinates
// and maintain the click/touch offset
d3.select(this)
.attr('cx', d3.event.x - offset.x)
.attr('cy', d3.event.y - offset.y);
}
svg
.append('circle')
.attr('cx', width / 2)
.attr('cy', boxHeight / 2)
.attr('r', 50)
.style('fill', 'green')
.call(
// Attach drag event handlers to the circle
d3
.drag()
.on('start', dragStart)
.on('drag', drag)
);
return svg.node();
}
d3 = require('d3')
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.
