TypeScript d3-shape.area函数代码示例

function drawChart(user: PuzzleUserData) {
  const history = Array.from(user.recent.map(x => x[2]))
  const rating = user.rating
  if (rating !== undefined) {
    history.push(rating)
  }
  const data = history.map((x, i) => [i + 1, x])
  const graph = select('#training-graph')
  const margin = {top: 5, right: 20, bottom: 5, left: 35}
  const width = +graph.attr('width') - margin.left - margin.right
  const height = +graph.attr('height') - margin.top - margin.bottom
  const g = graph.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  const xvalues = data.map(d => d[0])
  const scaleX = scaleLinear()
  .domain([Math.min.apply(null, xvalues), Math.max.apply(null, xvalues)])
  .rangeRound([0, width])

  const yvalues = data.map(d => d[1])
  const scaleY = scaleLinear()
  .domain([Math.min.apply(null, yvalues) - 10, Math.max.apply(null, yvalues) + 10])
  .rangeRound([height, 0])

  const area = d3Area()
  .x(d => scaleX(d[0]))
  .y0(height)
  .y1(d => scaleY(d[1]))

  const line = d3Area()
  .x(d => scaleX(d[0]))
  .y(d => scaleY(d[1]))

  const yAxis = axisLeft(scaleY)
  .tickFormat(d => String(d))

  g.datum(data)

  g.append('g')
  .call(yAxis)
  .append('text')
  .attr('class', 'legend')
  .attr('transform', 'rotate(-90)')
  .attr('y', 6)
  .attr('dy', '0.71em')
  .attr('text-anchor', 'end')
  .text(i18n('rating'))

  g.append('path')
  .attr('class', 'path')
  .attr('fill', 'steelblue')
  .attr('stroke', 'steelblue')
  .attr('stroke-linejoin', 'round')
  .attr('stroke-linecap', 'round')
  .attr('stroke-width', 0)
  .attr('d', area)

  g.append('path')
  .attr('class', 'line')
  .attr('d', line)
}

 private getAreaGenerator(): Area<CsiDTO> {
   return area<CsiDTO>()
     .curve(curveCatmullRom)
     .x((csiDTO: CsiDTO) => this.calculateX(csiDTO))
     .y1((csiDTO: CsiDTO) => this.calculateY(csiDTO))
     .y0(this.yScale(0))
 }

export const createAreaHitTester = createContinuousSeriesHitTesterCreator(() => {
  const path: PathFn = area() as any;
  path.x(dArea.x());
  path.y1!(dArea.y1!());
  path.y0!(dArea.y0!());
  return path;
});

export function getAreaPath(scales: Scales, data: PointData[], y0: number, curve: CurveFactory = curveLinear): string {
    const {xScale, yScale} = scales;
    return area<PointData>()
        .x((element: ExtendedSubmit) => {
            return xScale(new Date(element.created));
        }).y0(y0)
        .y1((element: ExtendedSubmit) => {
            return yScale(element.totalPoints);
        }).curve(curve)(data);
}

interface RadialAreaDatum {
    startAngle: number;
    endAngle: number;
    innerRadius: number;
    outerRadius: number;
    missing: boolean;
}

let radialAreaAngRAccessorFn: (d: RadialAreaDatum, index?: number, data?: RadialAreaDatum[]) => number;
let radialAreaAngRAccessorFnMaybe: null | ((d: RadialAreaDatum, index?: number, data?: RadialAreaDatum[]) => number);
let radialAreaDefAccessorFn: (d: RadialAreaDatum, index?: number, data?: RadialAreaDatum[]) => boolean;

// area(...) create Area generator =====================================================

let defaultArea: d3Shape.Area<[number, number]> = d3Shape.area();
let area: d3Shape.Area<AreaDatum> = d3Shape.area<AreaDatum>();

// configure Area(...) generator ======================================================

// context(...) ----------------------------------------------------------------------

if (context !== null) {
    defaultArea = defaultArea.context(context); // draw to canvas
}
context = defaultArea.context();

area = area.context(null); // use as path string generator for SVG

// x(...) ----------------------------------------------------------------------------

export default function drawMoveTimesChart(
  element: SVGElement,
  aData: AnalyseData,
  moveCentis: number[],
  curPly: number
) {
  const division = aData.game.division

  const svg = select(element)
  const margin = {top: 10, right: 10, bottom: 10, left: 25}
  const width = +svg.attr('width') - margin.left - margin.right
  const height = +svg.attr('height') - margin.top - margin.bottom
  const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  const { max, series } = makeSerieData(aData, moveCentis)

  function addDivisionLine(xPos: number, name: string) {
    g.append('line')
    .attr('class', 'division ' + name)
    .attr('x1', xPos)
    .attr('x2', xPos)
    .attr('y1', y(-max))
    .attr('y2', y(max))

    g.append('text')
    .attr('class', 'chart-legend')
    .attr('transform', 'rotate(90)')
    .attr('y', -xPos)
    .attr('dy', '-0.4em')
    .text(name)
  }

  function setCurrentPly(ply: number | null) {
    g.selectAll('.dot').remove()
    if (ply !== null) {
      const isWhite = !!(ply & 1)
      const p = isWhite ? series.white.find(p => p.ply === ply) : series.black.find(p => p.ply === ply)
      if (p) {
        g.append('circle')
        .attr('class', 'dot')
        .attr('cx', x(ply))
        .attr('cy', y(p.y))
        .attr('r', 3)
      }
    }
  }

  const x = scaleLinear()
  .domain([0, series.white.length + series.black.length])
  .rangeRound([0, width])

  const y = scaleLinear()
  .domain([-max, max])
  .rangeRound([height, 0])

  const line = d3Area<Point>()
  .x(d => x(d.ply))
  .y(d => y(d.y))

  const area = d3Area<Point>()
  .x(d => x(d.ply))
  .y0(y(0))
  .y1(d => y(d.y))

  const maxCentis = Math.max.apply(Math, moveCentis) / 100
  const legendScale = scaleLinear()
  .domain([-maxCentis, maxCentis])
  .rangeRound([height, 0])

  const yAxis = axisLeft<number>(legendScale)
  .tickFormat(d => String(Math.abs(d)))

  g.append('g')
  .call(yAxis)
  .append('text')
  .attr('class', 'legend')
  .attr('transform', 'rotate(-90)')
  .attr('y', 6)
  .attr('dy', '0.71em')
  .attr('text-anchor', 'end')
  .text('Seconds')

  g.append('path')
  .datum(series.white)
  .attr('class', 'area above')
  .attr('d', area)

  g.append('path')
  .datum(series.black)
  .attr('class', 'area below')
  .attr('d', area)

  g.append('path')
  .attr('class', 'line')
  .datum(series.white)
  .attr('d', line)

  g.append('path')
  .attr('class', 'line')
  .datum(series.black)
//.........这里部分代码省略.........

} from 'd3-shape';
import {
  SeriesList, Series, PointList, Point, DataItems, AddSeriesFn, ScalesCache, ScaleSeriesPointsFn,
  GetPointTransformerFn, Colors, Rect,
  BarSeries, ScatterSeries, PieSeries,
  PointComponentProps, PathFn,
} from '../../types';
import { ARGUMENT_DOMAIN } from '../../constants';
import { getWidth, getValueDomainName, fixOffset } from '../../utils/scale';

const getX = ({ x }: PointComponentProps) => x;
const getY = ({ y }: PointComponentProps) => y;
const getY1 = ({ y1 }: PointComponentProps) => y1!;

/** @internal */
export const dArea: PathFn = area<PointComponentProps>()
  .x(getX)
  .y1(getY)
  .y0(getY1) as any;

/** @internal */
export const dLine: PathFn = line<PointComponentProps>()
  .x(getX)
  .y(getY) as any;

/** @internal */
export const dSpline: PathFn = line<PointComponentProps>()
  .x(getX)
  .y(getY)
  .curve(curveMonotoneX) as any;

export default function drawAcplChart(element: SVGElement, aData: AnalyseData, curPly: number) {
  const division = aData.game.division

  const svg = select(element)
  const graphData = makeSerieData(aData)
  const margin = {top: 10, right: 10, bottom: 10, left: 10}
  const width = +svg.attr('width') - margin.left - margin.right
  const height = +svg.attr('height') - margin.top - margin.bottom
  const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  function addDivisionLine(xPos: number, name: string) {
    g.append('line')
    .attr('class', 'division ' + name)
    .attr('x1', xPos)
    .attr('x2', xPos)
    .attr('y1', y(-1))
    .attr('y2', y(1))

    g.append('text')
    .attr('class', 'chart-legend')
    .attr('transform', 'rotate(90)')
    .attr('y', -xPos)
    .attr('dy', '-0.4em')
    .text(name)
  }

  function setCurrentPly(ply: number | null) {
    g.selectAll('.dot').remove()
    if (ply !== null) {
      const xply = ply - 1
      const p = graphData[xply]
      if (p) {
        g.append('circle')
        .attr('class', 'dot')
        .attr('cx', x(xply))
        .attr('cy', y(p.acpl))
        .attr('r', 3)
      }
    }
  }

  const x = scaleLinear()
  .domain([0, graphData.length])
  .rangeRound([0, width])

  const y = scaleLinear()
  .domain([-1, 1])
  .rangeRound([height, 0])

  const line = d3Area<Point>()
  .x((_, i) => x(i))
  .y(d => y(d.acpl))

  const area = d3Area<Point>()
  .x((_, i) => x(i))
  .y1(d => d.acpl >= 0 ? y(d.acpl) : y(0))

  g.datum(graphData)

  g.append('line')
  .attr('class', 'zeroline')
  .attr('x1', 0)
  .attr('x2', width)
  .attr('y1', y(0))
  .attr('y2', y(0))

  g.append('clipPath')
  .attr('id', 'clip-below')
  .append('path')
  .attr('d', area.y0(d => y(d.acpl)))

  g.append('clipPath')
  .attr('id', 'clip-above')
  .append('path')
  .attr('d', area.y0(y(0)))

  g.append('path')
  .attr('class', 'area above')
  .attr('clip-path', 'url(#clip-above)')
  .attr('d', area)

  g.append('path')
  .attr('class', 'area below')
  .attr('clip-path', 'url(#clip-below)')
  .attr('d', area.y0(d => d.acpl <= 0 ? y(d.acpl) : y(0)))

  g.append('path')
  .attr('class', 'line')
  .attr('d', line)

  if (division && (division.middle || division.end)) {
    addDivisionLine(x(0), 'Opening')
    if (division.middle) {
      addDivisionLine(x(division.middle), 'Middlegame')
    }
    if (division.end) {
      addDivisionLine(x(division.end), 'Endgame')
    }
  }

//.........这里部分代码省略.........

import { area, curveStepAfter } from 'd3-shape';

var a=area<number>().curve(curveStepAfter);