How to use the d3-shape.linkHorizontal function in d3-shape

To help you get started, we’ve selected a few d3-shape 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 DefinitelyTyped / DefinitelyTyped / types / d3-shape / d3-shape-tests.ts View on Github external
let coordinates: [number, number];

coordinates = defaultLinkDatum.source;
coordinates = defaultLinkDatum.target;

// Test generator factories ==========================================================

let defaultLink: d3Shape.Link;

defaultLink = d3Shape.linkHorizontal();
defaultLink = d3Shape.linkVertical();

let link: d3Shape.Link, HierarchyPointNode>;

link = d3Shape.linkHorizontal, HierarchyPointNode>();
link = d3Shape.linkVertical, HierarchyPointNode>();

let svgLink: d3Shape.Link, HierarchyPointNode>;

svgLink = d3Shape.linkHorizontal, HierarchyPointNode>();
svgLink = d3Shape.linkVertical, HierarchyPointNode>();

let defaultLinkRadial: d3Shape.LinkRadial;

defaultLinkRadial = d3Shape.linkRadial();

let radialLink: d3Shape.LinkRadial, HierarchyPointNode>;

radialLink = d3Shape.linkRadial, HierarchyPointNode>();

let svgLinkRadial: d3Shape.LinkRadial, HierarchyPointNode>;
github tomshanley / d3-sankey-circular / dist / d3-sankey-circular.js View on Github external
link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.leftLargeArcRadius;
          link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.rightLargeArcRadius;
        }
      }

      // all links
      link.circularPathData.leftInnerExtent = link.circularPathData.sourceX + link.circularPathData.leftNodeBuffer;
      link.circularPathData.rightInnerExtent = link.circularPathData.targetX - link.circularPathData.rightNodeBuffer;
      link.circularPathData.leftFullExtent = link.circularPathData.sourceX + link.circularPathData.leftLargeArcRadius + link.circularPathData.leftNodeBuffer;
      link.circularPathData.rightFullExtent = link.circularPathData.targetX - link.circularPathData.rightLargeArcRadius - link.circularPathData.rightNodeBuffer;
    }

    if (link.circular) {
      link.path = createCircularPathString(link);
    } else {
      var normalPath = linkHorizontal().source(function (d) {
        var x = d.source.x0 + (d.source.x1 - d.source.x0);
        var y = d.y0;
        return [x, y];
      }).target(function (d) {
        var x = d.target.x0;
        var y = d.y1;
        return [x, y];
      });
      link.path = normalPath(link);
    }
  });
}
github graphsense / graphsense-dashboard / src / nodeGraph.js View on Github external
return c
    }
    this.colors =
      {
        'entity': {
          categories: colorGen(this.colorMapCategories, 'entity'),
          tags: colorGen(this.colorMapTags, 'entity'),
          range: (v) => defaultColor['entity']
        },
        'address': {
          categories: colorGen(this.colorMapCategories, 'address'),
          tags: colorGen(this.colorMapTags, 'address'),
          range: (v) => defaultColor['address']
        }
      }
    this.linker = linkHorizontal()
      .x(([node, isSource, scale]) => isSource ? node.getXForLinks() + node.getWidthForLinks() : node.getXForLinks() - this.arrowSummit)
      .y(([node, isSource, scale]) => node.getYForLinks() + node.getHeightForLinks() / 2)
    this.shadowLinker = linkHorizontal()
      .x(([node, isSource]) => isSource ? node.getXForLinks() + node.getWidthForLinks() : node.getXForLinks())
      .y(([node, isSource]) => node.getYForLinks() + node.getHeightForLinks() / 2)
    this.snapshots = []

    this.currentSnapshotIndex = -1
    // initialize with true to allow initial snapshot
    this.dirty = true
    this.createSnapshot()
  }
  setCategoryColors (cc) {
github tomshanley / d3-sankey-circular / dist / d3-sankey-circular.es.js View on Github external
link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.leftLargeArcRadius;
          link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.rightLargeArcRadius;
        }
      }

      // all links
      link.circularPathData.leftInnerExtent = link.circularPathData.sourceX + link.circularPathData.leftNodeBuffer;
      link.circularPathData.rightInnerExtent = link.circularPathData.targetX - link.circularPathData.rightNodeBuffer;
      link.circularPathData.leftFullExtent = link.circularPathData.sourceX + link.circularPathData.leftLargeArcRadius + link.circularPathData.leftNodeBuffer;
      link.circularPathData.rightFullExtent = link.circularPathData.targetX - link.circularPathData.rightLargeArcRadius - link.circularPathData.rightNodeBuffer;
    }

    if (link.circular) {
      link.path = createCircularPathString(link);
    } else {
      var normalPath = linkHorizontal().source(function (d) {
        var x = d.source.x0 + (d.source.x1 - d.source.x0);
        var y = d.y0;
        return [x, y];
      }).target(function (d) {
        var x = d.target.x0;
        var y = d.y1;
        return [x, y];
      });
      link.path = normalPath(link);
    }
  });
}
github hshoff / vx / packages / vx-shape / src / shapes / link / diagonal / LinkHorizontal.js View on Github external
return data => {
    const link = linkHorizontal();
    link.x(x);
    link.y(y);
    link.source(source);
    link.target(target);
    return link(data);
  };
}
github ethantran / react-native-examples / src / components / AnimatedSvgD3ShapeLinkHorizontal.js View on Github external
function createGenerator(props, generator?: Link): Link {
    generator = generator || d3.linkHorizontal();
    return args.reduce((acc: Link, arg) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}
github atlasmap / atlasmap / ui-react / packages / atlasmap-ui / src / Canvas / CanvasLink.tsx View on Github external
() =>
      linkHorizontal()
        .context(null)
        .source(d => d.start)
        .target(d => d.end)
        .x(d => d.x)
        .y(d => d.y),
    []
github corestate55 / netoviz / lib / graph / dependency2 / operational-visualizer.js View on Github external
_makeDependencyLines(lines, lineClass) {
    const linkGenerator = linkHorizontal()
      .x(d => d[0] + this.p_r)
      .y(d => d[1] + this.p_r)
    this.depLineSVGGrp
      .selectAll(`path.dep2.${lineClass}`)
      .data(lines.map(line => this._lineConverter(line)))
      .enter()
      .append('path')
      .attr('d', linkGenerator)
      .attr('class', d => `dep2 ${lineClass} ${d.type}`)
  }
github mcnuttandrew / forum-explorer / src / layouts / time-embed-x.js View on Github external
  path: (xScale, yScale) => linkHorizontal().x(d => xScale(getX(d))).y(d => yScale(getY(d))),
  offset: () => ''