D3 Line

    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 lineFunc = d3.line()
                 .x( d => d.x )
                 .y( d => d.y )

svg.append('path')
   .attr('d', lineFunc(data))
   .attr('stroke', 'black')
   .attr('fill', 'none');
  

  let lineFunc = d3.line()
                 .x( d => d.x )
                 .y( d => d.y )

Crea una funzione (o generatore) che restituirà la successione delle istruzioni SVG per disegnare una linea con i valori che verranno passati come parametro.

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

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

• D3 Lines