Skip to content

Instantly share code, notes, and snippets.

@GitNoise

GitNoise/.block

Created March 21, 2019 14:25
Show Gist options
  • Save GitNoise/3889da18476b9cc9952e70416903e847 to your computer and use it in GitHub Desktop.
Save GitNoise/3889da18476b9cc9952e70416903e847 to your computer and use it in GitHub Desktop.
Download ZIP
Line ordinal
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
line {
stroke: black;
}
svg {
border: 1px solid red;
}
#container { position: relative; }
.label { position: absolute; }
</style>
</head>
<body>
<div id="container">
<svg>
<defs>
<marker id="arrowEnd" markerWidth="15" markerHeight="7" markerUnits="strokeWidth" refx="12" refy="3" orient="auto">
<path class="arrow" d="M0,0 L15,3 L0,6 z"></path>
</marker>
<marker id="arrowStart" markerWidth="15" markerHeight="9" markerUnits="strokeWidth" refx="2" refy="3" orient="auto">
<path class="arrow" d="M15,0 L0,3 L15,6 z"></path>
</marker>
</defs>
</svg>
<div class="label" id="catA">Category A</div>
<div class="label" id="catB">Category B</div>
</div>
<script>
const margin = 24,
width = 350,
height = 300,
smallMargin = 8;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
svg.append("line")
.attr("x1", 0 + margin)
.attr("x2", width - margin)
.attr("y1", height / 2)
.attr("y2", height / 2)
.attr("marker-end", "url(#arrowEnd)")
.attr("marker-start", "url(#arrowStart)")
const svgBCR = svg.node().getBoundingClientRect();
d3.select("#catA")
.attr("style", `top: ${height/2 + smallMargin}px; left:${margin}px;`);
const catB = d3.select("#catB");
const catBBCR = catB.node().getBoundingClientRect();
catB
.attr("style", `top: ${height/2 + smallMargin}px; left:${width - margin - catBBCR.width}px;`);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment