How to use the d3-dag.decrossOpt function in d3-dag

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.

github smartcontractkit / chainlink / operator_ui / src / pages / Jobs / TaskListDag.tsx View on Github external
.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))

d3-dag

Layout algorithms for visualizing directed acylic graphs.

MIT
Latest version published 1 year ago

Package Health Score

64 / 100
Full package analysis