How to use d3-dag - 9 common examples
To help you get started, we’ve selected a few d3-dag examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
smartcontractkit / chainlink / operator_ui / src / pages / Jobs / TaskListDag.tsx View on Github 
.attr('height', height + nodeRadius * 2)
.attr('style', 'overflow: visible')
.attr('viewBox', `${0} ${0} ${width} ${height}`)
const groupSelection = svgSelection
.append('g')
.attr('transform', `translate(${nodeRadius * 2}, 0)`)
const dag = d3dag.dagStratify()(stratify)
d3dag
.sugiyama()
.size([width - 150, height])
.layering(d3dag.layeringSimplex())
.decross(d3dag.decrossOpt())
.coord(d3dag.coordVert())(dag)
const line = d3
.line()
.curve(d3.curveCatmullRom)
.x((node) => node.x)
.y((node) => node.y)
// Styling links
groupSelection
.append('g')
.selectAll('path')
.data(dag.links())
.enter()
.append('path')
.attr('d', ({ points }) => line(points))
.attr('fill', 'none').append('svg')
.attr('width', width)
.attr('height', height + nodeRadius * 2)
.attr('style', 'overflow: visible')
.attr('viewBox', `${0} ${0} ${width} ${height}`)
const groupSelection = svgSelection
.append('g')
.attr('transform', `translate(${nodeRadius * 2}, 0)`)
const dag = d3dag.dagStratify()(stratify)
d3dag
.sugiyama()
.size([width - 150, height])
.layering(d3dag.layeringSimplex())
.decross(d3dag.decrossOpt())
.coord(d3dag.coordVert())(dag)
const line = d3
.line()
.curve(d3.curveCatmullRom)
.x((node) => node.x)
.y((node) => node.y)
// Styling links
groupSelection
.append('g')
.selectAll('path')
.data(dag.links())
.enter()
.append('path')const svgSelection = d3
.select(ref)
.append('svg')
.attr('width', width)
.attr('height', height + nodeRadius * 2)
.attr('style', 'overflow: visible')
.attr('viewBox', `${0} ${0} ${width} ${height}`)
const groupSelection = svgSelection
.append('g')
.attr('transform', `translate(${nodeRadius * 2}, 0)`)
const dag = d3dag.dagStratify()(stratify)
d3dag
.sugiyama()
.size([width - 150, height])
.layering(d3dag.layeringSimplex())
.decross(d3dag.decrossOpt())
.coord(d3dag.coordVert())(dag)
const line = d3
.line()
.curve(d3.curveCatmullRom)
.x((node) => node.x)
.y((node) => node.y)
// Styling links
groupSelection
.append('g')
.selectAll('path').attr('width', width)
.attr('height', height + nodeRadius * 2)
.attr('style', 'overflow: visible')
.attr('viewBox', `${0} ${0} ${width} ${height}`)
const groupSelection = svgSelection
.append('g')
.attr('transform', `translate(${nodeRadius * 2}, 0)`)
const dag = d3dag.dagStratify()(stratify)
d3dag
.sugiyama()
.size([width - 150, height])
.layering(d3dag.layeringSimplex())
.decross(d3dag.decrossOpt())
.coord(d3dag.coordVert())(dag)
const line = d3
.line()
.curve(d3.curveCatmullRom)
.x((node) => node.x)
.y((node) => node.y)
// Styling links
groupSelection
.append('g')
.selectAll('path')
.data(dag.links())
.enter()
.append('path')
.attr('d', ({ points }) => line(points))// Clean up
d3.select(ref).select('svg').remove()
const svgSelection = d3
.select(ref)
.append('svg')
.attr('width', width)
.attr('height', height + nodeRadius * 2)
.attr('style', 'overflow: visible')
.attr('viewBox', `${0} ${0} ${width} ${height}`)
const groupSelection = svgSelection
.append('g')
.attr('transform', `translate(${nodeRadius * 2}, 0)`)
const dag = d3dag.dagStratify()(stratify)
d3dag
.sugiyama()
.size([width - 150, height])
.layering(d3dag.layeringSimplex())
.decross(d3dag.decrossOpt())
.coord(d3dag.coordVert())(dag)
const line = d3
.line()
.curve(d3.curveCatmullRom)
.x((node) => node.x)
.y((node) => node.y)
// Styling links
groupSelectiond3-dag
Layout algorithms for visualizing directed acylic graphs.
