• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript d3-selection.selectAll函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中d3-selection.selectAll函数的典型用法代码示例。如果您正苦于以下问题:TypeScript selectAll函数的具体用法?TypeScript selectAll怎么用?TypeScript selectAll使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了selectAll函数的9个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: function

	resize.eval = function() {
		selectAll('svg').remove()
		selectAll('.chart-drawing')
			.append('svg')
			.append('g').attr('class', 'view')
		drawCharts(data)
	}
开发者ID:streamcode9,项目名称:svg-time-series,代码行数:7,代码来源:index.ts


示例2: alert

	.get((error: any, data: any[]) => {
		if (error != null)
		{
			alert('Data can\'t be downloaded or parsed')
			return
		}

		const onPath = (path: any) => {
			 path.attr('d', (cityIdx: number) =>
				d3shape.line()
                     .defined((d: number[]) => d[cityIdx])
                     .x((d: number[], i: number) => i)
					.y((d: number[]) => d[cityIdx])
					.call(null, data)
			)
		}

        const onPathModel = (path: any) => {
            path.attr('d', (cityIdx: number) =>
                d3shape.line()
                    .defined((d: number[]) => d[cityIdx])
                    .x((d: number[], i: number) => calcDate(i, startDate, 86400000))
                    .y((d: number[]) => d[cityIdx])
                    .call(null, data)
            )
        }

        d3selection.selectAll('svg#default').select(function () {
            new draw.TimeSeriesChart(d3selection.select(this), 0, 1, [0, 1], onPath, data.length)
		})
        d3selection.selectAll('svg#model').select(function () {
            new drawModelCS.TimeSeriesChartModelCS(d3selection.select(this), startDate, 86400000, [0, 1], onPathModel, data.length)
        })
    })
开发者ID:streamcode9,项目名称:svg-time-series,代码行数:34,代码来源:index.ts


示例3: drawCharts

export function drawCharts (data: [number, number][]) {
	let charts: TimeSeriesChart[] = []

	const onZoom = () => charts.forEach((c) => c.zoom())
	const onMouseMove = () => {
		const [x, _] = d3mouse(d3event.target)
		charts.forEach((c) => c.onHover(x))
	}

	const onSelectChart: ValueFn<HTMLElement, any, any> = function (element: HTMLElement, datum: any, descElement: any) {
		const svg = select(this).select('svg')
		const legend = select(this).select('.chart-legend')
		let chart = new TimeSeriesChart(svg, legend, Date.now(), 86400000, data.map(_ => _), buildSegmentTreeTupleNy, buildSegmentTreeTupleSf, onZoom, onMouseMove)
		charts.push(chart)
	}

	selectAll('.chart').select<HTMLElement>(onSelectChart)

	let j = 0
	setInterval(function() {
		let newData = data[j % data.length]
		charts.forEach(c => c.updateChartWithNewData(newData))
		j++
	}, 5000)
	measure(3, (fps) => {
		document.getElementById('fps').textContent = fps
	})
}
开发者ID:streamcode9,项目名称:svg-time-series,代码行数:28,代码来源:common.ts


示例4: onCsv

onCsv((data) => {
	const path = selectAll('g.view')
		.selectAll('path')
		.data([0, 1])
		.enter().append('path')
		.attr('d', (cityIdx) =>
			line()
				.defined((d) => !isNaN(d[cityIdx]))
				.x((d, i) => i)
				.y((d) => d[cityIdx])
				.call(null, data),
		)

	selectAll('svg').each(function() {
		return new TimeSeriesChart(select(this), data.length)
	})
	measureAll()
})
开发者ID:streamcode9,项目名称:svg-time-series,代码行数:18,代码来源:index.ts


示例5: select

window['buildSpecOpts'] = (id: string, baseName: string) => {
  const oldName = select('#' + id).attr('data-name');
  const prefixSel = select('select[name=' + id + ']');
  const inputsSel = selectAll('input[name=' + id + ']:checked');
  const prefix = prefixSel.empty() ? id : prefixSel.property('value');
  const values = inputsSel
    .nodes()
    .map((n: any) => n.value)
    .sort()
    .join('_');
  const newName = baseName + prefix + (values ? '_' + values : '');
  if (oldName !== newName) {
    window['changeSpec'](id, newName);
  }
};
开发者ID:vega,项目名称:vega-lite,代码行数:15,代码来源:index.ts


示例6: drawCharts

export function drawCharts (data: [number, number][]) {
	let charts: TimeSeriesChart[] = []

	const onZoom = () => charts.forEach((c) => c.zoom())

	const onSelectChart: ValueFn<any, any, any> = function (element: any, datum: any, descElement: any) {
		let chart = new TimeSeriesChart(select(this), Date.now(), 86400000, data.map(_ => _), buildSegmentTreeTuple, onZoom)
		charts.push(chart)
	}

	selectAll('svg').select(onSelectChart)

	measure(3, (fps) => {
		document.getElementById('fps').textContent = fps
	})
}
开发者ID:streamcode9,项目名称:svg-time-series,代码行数:16,代码来源:index.ts


示例7:

exitTransition = exitTransition.filter(function (d, i, g) {
    let that: SVGCircleElement = this;
    // let that2: HTMLElement  = this; // fails, type mismatch
    let datum: CircleDatum = d;
    let index: number = i;
    let group: SVGCircleElement[] | ArrayLike<SVGCircleElement> = g;
    // console.log(this.x) // fails, x property not defined on SVGCircleElement
    return this.r.baseVal.value < i * d.r; // this-type SVGCircleElement, datum tpye CircleDatum
});

// Scenario 2: Filtering narrows the type of selected elements in a known way

// assume the class ".any-svg-type" can only be assigned to SVGElements in the DOM
let filterdGElements2: d3Transition.Transition<SVGGElement, any, HTMLElement, any>;

filterdGElements2 = selectAll<SVGElement, any>('.any-svg-type').transition().filter<SVGGElement>('g');
// filterdGElements2 = selectAll('.any-type').transition().filter('g'); // fails without using narrowing generic on filter method

filterdGElements2 = selectAll<SVGElement, any>('.any-svg-type').transition().filter<SVGGElement>(function (d, i, g) {
    let that: SVGElement = this;
    // let that2: HTMLElement  = this; // fails, type mismatch
    let datum: CircleDatum = d;
    let index: number = i;
    let group: SVGElement[] | ArrayLike<SVGElement> = g;
    return that.tagName === 'g' || that.tagName === 'G';
});
// filterdGElements2 = selectAll<SVGElement, any>('.any-svg-type').transition().filter(function(){
//     let that: SVGElement = this;
//     return that.tagName === 'g'|| that.tagName === 'G';
// }); // fails without using narrowing generic on filter method
开发者ID:ArtemZag,项目名称:DefinitelyTyped,代码行数:30,代码来源:d3-transition-tests.ts


示例8: trim

hljs.initHighlightingOnLoad();

declare const BASEURL: string;

const loader = vega.loader({
  baseURL: BASEURL
});

const editorURL = 'https://vega.github.io/editor/';

function trim(str: string) {
  return str.replace(/^\s+|\s+$/g, '');
}

/* Anchors */
selectAll('h2, h3, h4, h5, h6').each(function(this: d3.BaseType) {
  const sel = select(this);
  const name = sel.attr('id');
  const title = sel.text();
  sel.html('<a href="#' + name + '" class="anchor"><span class="octicon octicon-link"></span></a>' + trim(title));
});

/* Documentation */
function renderExample($target: Selection<any, any, any, any>, specText: string) {
  $target.classed('example', true);
  $target.text('');

  const vis = $target.append('div').attr('class', 'example-vis');

  // Decrease visual noise by removing $schema and description from code examples.
  const textClean = specText.replace(/(\s)+\"(\$schema|description)\": \".*?\",/g, '');
开发者ID:vega,项目名称:vega-lite,代码行数:31,代码来源:index.ts


示例9: bat

/**
 * Typescript definition tests for d3/d3-selection-multi module
 *
 * Note: These tests are intended to test the definitions only
 * in the sense of typing and call signature consistency. They
 * are not intended as functional tests.
 */

import { selectAll, Selection, ArrayLike } from 'd3-selection';
import { Transition } from 'd3-transition';

import * as d3SelectionMulti from 'd3-selection-multi';

let selection: Selection<HTMLAnchorElement, string, HTMLElement, undefined> = selectAll<HTMLAnchorElement, string>('a');

// Selection.attrs

// Simple object
selection = selection.attrs({
    foo: 1,
    bar: '2',
    baz: true,
});

// Function values
selection = selection.attrs({
    foo: () => 1,
    bar: (d) => d,
    baz: (d, i) => i !== 0,
    bat() {
        return this.href;
开发者ID:AlexGalays,项目名称:DefinitelyTyped,代码行数:31,代码来源:d3-selection-multi-tests.ts



注:本文中的d3-selection.selectAll函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript d3-selection.Selection类代码示例发布时间:2022-05-25
下一篇:
TypeScript d3-selection.select函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap