本文整理汇总了TypeScript中d3-shape.area函数的典型用法代码示例。如果您正苦于以下问题：TypeScript area函数的具体用法？TypeScript area怎么用？TypeScript area使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了area函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: drawChart
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)
}
开发者ID:mbensley，项目名称:lichobile，代码行数:60，代码来源:menu.ts
示例2: getAreaGenerator
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))
}
开发者ID:iteratec，项目名称:OpenSpeedMonitor，代码行数:7，代码来源:csi-graph.calculator.ts
示例3: createContinuousSeriesHitTesterCreator
export const createAreaHitTester = createContinuousSeriesHitTesterCreator(() => {
const path: PathFn = area() as any;
path.x(dArea.x());
path.y1!(dArea.y1!());
path.y0!(dArea.y0!());
return path;
});
开发者ID:MaximKudriavtsev，项目名称:devextreme-reactive，代码行数:7，代码来源:series.ts
示例4: getAreaPath
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);
}
开发者ID:fykosak，项目名称:fksdb，代码行数:10，代码来源:lines.ts
示例5:
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(...) ----------------------------------------------------------------------------
开发者ID:Georadix，项目名称:DefinitelyTyped，代码行数:29，代码来源:d3-shape-tests.ts
示例6: drawMoveTimesChart
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)
//.........这里部分代码省略.........
开发者ID:mbensley，项目名称:lichobile，代码行数:101，代码来源:moveTimes.ts
示例7:
} 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;
开发者ID:MaximKudriavtsev，项目名称:devextreme-reactive，代码行数:30，代码来源:computeds.ts
示例8: drawAcplChart
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')
}
}
//.........这里部分代码省略.........
开发者ID:mbensley，项目名称:lichobile，代码行数:101，代码来源:acpl.ts
示例9:
import { area, curveStepAfter } from 'd3-shape';
var a=area<number>().curve(curveStepAfter);
开发者ID:Tragetaschen，项目名称:awesome-typescript-loader-module-augmentation，代码行数:3，代码来源:main.ts
注：本文中的d3-shape.area函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。 |
客服电话
APP下载
官方微信
请发表评论