{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 200]);
svg
.append("defs")
.append("marker")
.attr("id", "arrow-right")
.attr("viewBox", [
0,
-2,
markerTriangleLength + 2,
markerTriangleThickness + dimLineReacher + dimLineReacherTail + 2
])
.attr("refX", markerTriangleLength)
.attr("refY", markerTriangleThickness / 2 + dimLineReacherTail)
.attr("markerWidth", markerTriangleLength + 2)
.attr(
"markerHeight",
markerTriangleThickness + dimLineReacher + dimLineReacherTail
)
.attr("orient", "auto-start-reverse")
.append("path")
.attr("d", d3.line().curve(d3.curveLinearClosed)(arrowPointsRight))
.attr("fill", markerColorWithOpacity)
.attr("stroke", markerColorWithOpacity);
svg
.append("defs")
.append("marker")
.attr("id", "arrow-left")
.attr("viewBox", [
0,
-2,
markerTriangleLength + 2,
markerTriangleThickness + dimLineReacher + dimLineReacherTail + 2
])
.attr("refX", markerTriangleLength)
.attr("refY", markerTriangleThickness / 2 + dimLineReacher)
.attr("markerWidth", markerTriangleLength + 2)
.attr(
"markerHeight",
markerTriangleThickness + dimLineReacher + dimLineReacherTail
)
.attr("orient", "auto-start-reverse")
.append("path")
.attr("d", d3.line().curve(d3.curveLinearClosed)(arrowPointsLeft))
.attr("fill", markerColorWithOpacity)
.attr("stroke", markerColorWithOpacity);
svg
.append("path")
.attr(
"d",
d3.line()([
[50, 120 - (dimLineReacher + markerTriangleThickness / 2 + reacherGap)],
[
50 + shapeWidth,
120 - (dimLineReacher + markerTriangleThickness / 2 + reacherGap)
]
])
)
.attr("stroke", "black")
.attr("stroke-width", strokeWidth)
.attr("marker-start", "url(#arrow-left)")
.attr("marker-end", "url(#arrow-right)")
.attr("fill", "none");
svg
.append("rect")
.attr("x", 50)
.attr("y", 120)
.attr("width", shapeWidth)
.attr("height", 20)
.attr("stroke", "gray")
.attr("fill", "#eee");
return svg.node();
}
markerColorWithOpacity = markerColor +
(Math.round(markerOpacity * 255).toString(16).length < 2
? "0" + Math.round(markerOpacity * 255).toString(16)
: Math.round(markerOpacity * 255).toString(16))
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.
