Published
Edited
Apr 18, 2022
1 star
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 200]);
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("fill", "#0005");
svg
.append("path")
.attr(
"d",
d3.line()([
[100, 60],
[40, 90],
[200, 80],
[300, 150]
])
)
.attr("stroke", "black")
.attr("stroke-width", strokeWidth)
.attr("marker-start", "url(#arrow)")
.attr("marker-end", "url(#arrow)")
.attr("fill", "none");
return svg.node();
}
refX = markerBoxWidth * refXFactor
refY = markerBoxHeight * refYFactor
arrowPoints = [
[markerBoxWidth, markerBoxHeight / 2],
[0, markerBoxHeight],
[0, 0]
]
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.
