The step curve interpolator creates vertical and horizontal lines representing a step function. A vertical line is created for each pair of points in the dataset. For each pair of points, the vertical line is positioned at the x coordinate of the first point.
Syntax:
d3.curveStepBefore()
Parameters: This method takes no parameters
Return Value: This method returns nothing.
Example 1:Â
HTML
<!DOCTYPE html><html><meta charset="utf-8"><head>Â Â <title>d3.curveStepBefore()</title></head>Â
<body>    <h1 style="text-align: center; color: green;">neveropen</h1>  <center>    <svg id="gfg" width="200" height="200"></svg></center>  <script>var data = [  {x: 0, y: 0},  {x: 1, y: 3},  {x: 2, y: 15},  {x: 5, y: 15},  {x: 6, y: 1},  {x: 7, y: 5},  {x: 8, y: 1}];Â
var xScale = d3.scaleLinear().domain([0, 8]).range([25, 175]);var yScale = d3.scaleLinear().domain([0,20]).range([175, 25]);Â
var line = d3.line()  .x((d) => xScale(d.x))  .y((d) => yScale(d.y))  // curveStepBefore is used  .curve(d3.curveStepBefore);Â
d3.select("#gfg")Â Â .append("path")Â Â .attr("d", line(data))Â Â .attr("fill", "none")Â Â .attr("stroke", "green");Â
// Defining pointsd3.select('#gfg')Â Â .selectAll('circle')Â Â .data(data)Â Â .enter()Â Â .append('circle')Â Â .attr('cx', (d) => xScale(d.x))Â Â .attr('cy', (d) => yScale(d.y))Â Â .attr('r', 3);Â
</script></body></html> |
Output:
Example 2:
HTML
<!DOCTYPE html><html><meta charset="utf-8"><head>Â Â <title>d3.curveStepBefore()</title></head>Â
<body>    <h1 style="text-align: center; color: green;">neveropen</h1>  <center>    <svg id="gfg" width="200" height="200"></svg></center>  <script>var points = [  {xpoint: 25, ypoint: 150},  {xpoint: 75, ypoint: 85},  {xpoint: 100, ypoint: 115},  {xpoint: 175, ypoint: 25}];Â
var Gen = d3.line()Â Â .x((p) => p.xpoint)Â Â .y((p) => p.ypoint)Â Â .curve(d3.curveStepBefore);Â
d3.select("#gfg")Â Â .append("path")Â Â .attr("d", Gen(points))Â Â .attr("fill", "none")Â Â .attr("stroke", "green");// Defining pointsd3.select('#gfg')Â Â .selectAll('circle')Â Â .data(points)Â Â .enter()Â Â .append('circle')Â Â .attr('cx', (d) => (d.xpoint))Â Â .attr('cy', (d) => (d.ypoint))Â Â .attr('r', 3);</script></body></html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
