D3 Line

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

let singleLinkData = {
    source: { x: 150, y: 30 },
    target: { x: 520, y: 170 }
}

let linkGen = d3.linkHorizontal()
                .x(d => d.x) 
                .y(d => d.y)

svg.append("path")
   .attr("d", linkGen(singleLinkData))
   .attr("stroke", "steelblue")
   .attr("fill", "none")
  

  let linkGen = d3.linkHorizontal()
                .x( d => d.x )
                .y( d => d.y )

Crea una funzione (o generatore) che restituirà la successione delle istruzioni SVG per disegnare una curva da un punto inziale (source) a uno finale (target) con i valori che verranno passati come parametro. Nell’esempio viene usata una curva ottimizzata per i collegamenti orizzontali.

  svg.append('path')
   .attr("d", linkGen(singleLinkData)) 

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

Sostituire il metodo linkHorizontal() con il metodo linkVertical().

Sostituire il metodo linkHorizontal() con il generico metodo link() usando il parametro d3.curveBumpX:

  let linkGen = link(d3.curveBumpX)

Provare anche d3.curveBumpY e d3.curveStep.

• D3 Links
• D3 Curves