d3-shape#curveBasis JavaScript Examples

The following examples show how to use d3-shape#curveBasis. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: connectionCalculator.js    From flume with MIT License 6 votes vote down vote up 
calculateCurve = (from, to) => {
  const length = to.x - from.x;
  const thirdLength = length / 3;
  const curve = line().curve(curveBasis)([
    [from.x, from.y],
    [from.x + thirdLength, from.y],
    [from.x + thirdLength * 2, to.y],
    [to.x, to.y]
  ]);
  return curve;
}
Example #2
Source File: AccelerationsChart.js    From openeew-dashboard with Apache License 2.0 6 votes vote down vote up 
renderPath = (data, axis) => {
  /**
   * * Merges all axis data into one big array
   */
  const rawAcc = data.map((d) => [...d[axis]])
  const mergedAcc = [].concat.apply([], rawAcc)

  /**
   * * Each second of data has 32 readings & there's a maximum 50 seconds
   * * of data sent from the mock API. X values are evenly spaced, based
   * * on array indices, so maximum value should be 32 x 50 === 1600
   */
  const x = scaleLinear()
    .domain([1, 32 * 50])
    .range([0, VIEWBOX_WIDTH])
  const y = scaleLinear().domain(Y_DOMAIN).range([VIEWBOX_HEIGHT, 0])

  const lineBuilder = line()
    .curve(curveBasis)
    .x((d, i) => {
      return x(i + 1)
    })
    .y((d) => y(d))

  const renderedPath = lineBuilder(mergedAcc)

  return renderedPath
}
Example #3
Source File: edge-container.js    From ThreatMapper with Apache License 2.0 5 votes vote down vote up 
spline = line()
  .curve(curveBasis)
  .x(d => d.x)
  .y(d => d.y)