Draw a circle with D3Draw a line (path) with D3Draw a curved line (path) with D3Draw a straight line (path) connected to a circleDraw a circle dot (marker) on a line (path) with D3Draw an arrowhead (marker) connected to a line in D3Draw lines between circles (nodes) using D3 linksDraw circles with a data selection joinDraw an arrow between circles with D3 linksHandling click events on svg elements in D3Generate random circles with D3Drag a circle with D3
Draw a horizontal line with an arrow between circles in D3
{
const boxHeight = 200;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);
// Define the circle variables
const circleX = 100;
const circleY = boxHeight / 2;
const radius = 40;
// Define the line variables
const lineLength = 200;
const lineStart = [circleX + radius, circleY];
const lineEnd = [lineStart[0] + lineLength, circleY];
// Define the arrowhead marker variables
const markerBoxWidth = 20;
const markerBoxHeight = 20;
const refX = markerBoxWidth / 2;
const refY = markerBoxHeight / 2;
const markerWidth = markerBoxWidth / 2;
const markerHeight = markerBoxHeight / 2;
const arrowPoints = [[0, 0], [0, 20], [20, 10]];
// Add the arrowhead marker definition to the svg element
svg
.append('defs')
.append('marker')
.attr('id', 'arrow')
.attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
.attr('refX', refX)
.attr('refY', refY)
.attr('markerWidth', markerBoxWidth)
.attr('markerHeight', markerBoxHeight)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', d3.line()(arrowPoints))
.attr('stroke', 'black');
// Add the first circle
svg
.append('circle')
.attr('cx', circleX)
.attr('cy', circleY)
.attr('r', radius)
.style('fill', 'green');
// Add the line with arrowhead at the end
svg
.append('path')
.attr('d', d3.line()([lineStart, lineEnd]))
.attr('stroke', 'black')
.attr('marker-end', 'url(#arrow)')
.attr('fill', 'none');
// Add the second circle
svg
.append('circle')
.attr('cx', lineEnd[0] + markerWidth + radius)
.attr('cy', circleY)
.attr('r', radius)
.style('fill', 'green');
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.
