Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.myLine {
stroke-width: 1px;
stroke: steelblue;
fill: none;
}
circle {
fill: orange;
}
</style>
</head>
<body>
<svg>
</svg>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("svg")
.attr("width", 960)
.attr("height", 500)
var data = [
{x: 100, y: 100, def: true},
{x: 300, y: 200, def: true},
{x: 200, y: 300, def: true},
{x: 100, y: 200, def: true},
]
var line = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveStepAfter)
.defined((d)=> d.def);
svg.append("path")
.datum(data)
.attr("d", line)
.classed("myLine", true);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d) => d.x)
.attr("cy",(d) => d.y)
.attr("r", 5)
</script>
</body>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-path.v1.min.js
https://d3js.org/d3-shape.v1.min.js