D3 Area

    let svg = d3.select("body").append("svg")
            .attr("width",670).attr("height",200)

let data = [{x:20, y:30}, {x:150, y:160}, {x:450, y:20}, {x:650, y:120}]

let areaFunc = d3.area()
                 .x( d => d.x )   
                 .y1( d => d.y )  
                 .y0( 200 )
  
svg.append('path')
   .attr('d', areaFunc(data))
   .attr('stroke', 'black')
   .attr('fill', '#69b3a2');
  

  let areaFunc = d3.area()
                 .x( d => d.x )   
                 .y1( d => d.y )  
                 .y0( 200 )

Genera una funzione che restituirà la successione delle istruzioni SVG per disegnare un poligono formato da coppie di punti x(), y1() e x(), y0() che procedono da sinistra verso destra.

  svg.append('path')
   .attr('d', areaFunc(data))

Crea un elemento SVG path e assegna all’attributo d le istruzioni di disegno generate da areaFunc() con i valori dell’array data.

Modificare il valore fisso (200) della funzione y0() con un’espressione basata sul dato passato, ad esempio

  .y0( d => d.y*1.25 )

 
oppure

  .y0( d => (d.y+100)/2 )

• D3 Areas