Método D3.js curveMonotoneY()

d3.curvaMonotonoY

Sintaxis:

d3.curveMonotoneY()

Parámetros: este método no acepta ningún parámetro.

Valor devuelto: este método no devuelve ningún valor.

Ejemplo 1: 

HTML

<!DOCTYPE html>
<html>
<head>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
  </script>
</head>
<body>
  <h1 style="text-align: center;
             color: green;">
    GeeksforGeeks
  </h1>
  <center>
    <svg id="gfg" width="250" height="250">
    </svg>
  </center>
  <script>
    var data = [
      { x: 0, y: 0 },
      { x: 1, y: 3 },
      { x: 2, y: 15 },
      { x: 5, y: 1 },
      { x: 6, y: 15 },
      { x: 7, y: 5 },
      { x: 8, y: 19 }];
  
    // Sorting the points by y axis
    data.sort((a, b) => a.y - b.y);
  
    var xScale = d3.scaleLinear()
        .domain([0, 8])
        .range([25, 200]);
    var yScale = d3.scaleLinear()
        .domain([0, 20])
        .range([200, 25]);
  
    var line = d3.line()
      .x((d) => xScale(d.x))
      .y((d) => yScale(d.y))
      .curve(d3.curveMonotoneY);
  
    d3.select("#gfg")
      .append("path")
      .attr("d", line(data))
      .attr("fill", "none")
      .attr("stroke", "green");
  </script>
</body>
</html>

Producción:

Ejemplo 2: ordenar los puntos no ordenados por el eje x y luego representar la curva.

HTML

<!DOCTYPE html>
<html>
<head>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
  </script>
</head>
<body>
  <h1 style="text-align: center; 
             color: green;">
    GeeksforGeeks
  </h1>
  <center>
    <svg id="gfg" width="250" height="200">
    </svg>
  </center>
  <script>
    var points = [
      { xpoint: 75, ypoint: 150 },
      { xpoint: 25, ypoint: 5 },
      { xpoint: 150, ypoint: 150 },
      { xpoint: 100, ypoint: 5 },
      { xpoint: 200, ypoint: 150 }];
  
    // Sorting the points by y axis
    points.sort((a, b) => a.ypoint - b.ypoint);
  
    var Gen = d3.line()
      .x((p) => p.xpoint)
      .y((p) => p.ypoint)
      .curve(d3.curveMonotoneY);
  
    d3.select("#gfg")
      .append("path")
      .attr("d", Gen(points))
      .attr("fill", "none")
      .attr("stroke", "green");
  
  </script>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *