本文整理汇总了TypeScript中d3-selection.Selection类的典型用法代码示例。如果您正苦于以下问题：TypeScript Selection类的具体用法？TypeScript Selection怎么用？TypeScript Selection使用的例子？那么, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Selection类的8个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: constructor
constructor(
svg: Selection<BaseType, {}, HTMLElement, any>,
dataLength: number,
drawLine: (idx: number, off: number) => string) {
const node: SVGSVGElement = svg.node() as SVGSVGElement
const div: HTMLElement = node.parentNode as HTMLElement
const viewNode: SVGGElement = svg.select('g').node() as SVGGElement
const t = new ViewWindowTransform(viewNode.transform.baseVal)
t.setViewPort(div.clientWidth, div.clientHeight)
const minY = -5
const maxY = 83
const minX = animateCosDown(dataLength / 2, 0, 0)
const maxX = minX + dataLength / 2
t.setViewWindow(minX, maxX, minY, maxY)
const paths = svg.select('g.view').selectAll('path')
let off = 0
animateBench((elapsed: number) => {
// Redraw path
paths.attr('d', (cityIdx: number) => drawLine(cityIdx, off))
off += 1
})
}示例2: info
private info(main: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, cls: string, label: string, value1: any, value2: any) {
if (value1 == value2) {
let attr = main.append("span")
.classed("attr", true);
attr.append("span")
.classed("desc", true)
.text(label + ": ");
attr.append("span")
.classed(cls, true)
.text(value1);
} else {
let attr1 = main.append("span")
.classed("attr dbefore", true);
attr1.append("span")
.classed("desc", true)
.text(label + ": ");
attr1.append("span")
.classed(cls, true)
.text(value1);
let attr2 = main.append("span")
.classed("attr dafter", true);
attr2.append("span")
.classed("desc", true)
.text(label + ": ");
attr2.append("span")
.classed(cls, true)
.text(value2);
}
}示例3: constructor
constructor(
svg: Selection<BaseType, {}, HTMLElement, any>,
legend: Selection<BaseType, {}, HTMLElement, any>,
startTime: number, timeStep: number,
data: Array<[number, number]>,
buildSegmentTreeTupleNy: (index: number, elements: any) => IMinMax,
buildSegmentTreeTupleSf: (index: number, elements: any) => IMinMax,
zoomHandler: () => void,
mouseMoveHandler: () => void) {
this.legendTime = legend.select('.chart-legend__time')
this.legendGreen = legend.select('.chart-legend__green_value')
this.legendBlue = legend.select('.chart-legend__blue_value')
// здесь второй базис образован не двумя точками, а
// эквивалентно точкой и вектором
// хорошо бы сделать например basisAR1PV()
// типа смарт-конструктор
// интересно что есть короткая эквивалентная формулировка
// this.idxToSpace = new AR1(startTime, timeStep)
// но она возвращает нас к координатному мышлению
this.idxToTime = betweenTBasesAR1(bUnit, new AR1Basis(startTime, startTime + timeStep))
// при добавлении точки первый и второй элемент
// становятся на место нулевого и первого соответственно
this.idxShift = betweenTBasesAR1(new AR1Basis(1, 2), bUnit)
this.buildSegmentTreeTupleNy = buildSegmentTreeTupleNy
this.buildSegmentTreeTupleSf = buildSegmentTreeTupleSf
this.zoomHandler = zoomHandler
this.mouseMoveHandler = mouseMoveHandler
this.bIndexFull = new AR1Basis(0, data.length - 1)
this.drawChart(svg, data)
}示例4: env_field
private env_field(element: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, env: EnvironmentItemData) {
element.append("span")
.classed("key", true)
.text(env.name);
element.append("span")
.classed("equal", true)
.text(" = ");
element.append("span")
.classed("value", true)
.text(env.value);
}示例5: env_li
private env_li(element: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, cls: string, env: EnvironmentItemData) {
this.env_field(
element.append("li")
.classed(cls, true),
env
)
}示例6:
.on("click", () => {
this.load(
this.d3node.select(".script-options").property("value"),
this.d3node.select(".exec-selection").property("value"),
this.d3node.select(".summarize").property("checked"),
)
})示例7: showTooltip
private showTooltip(d: TrialNodeData, trial_id: number) {
this.tooltipDiv.classed("hidden", false);
this.tooltipDiv.transition()
.duration(200)
.style("opacity", 0.9);
this.tooltipDiv.html(d.tooltip[trial_id])
.style("left", (d3_event.pageX - 3) + "px")
.style("top", (d3_event.pageY - 28) + "px");
}示例8: render
public render(data: DataPointT[]) {
let markWidth = this.bounds.width / data.length;
let toHex = function(val: [number, number, number]): string {
let acc = "#";
val.forEach(v => {
let hex = Math.floor(v).toString(16);
if (hex.length === 1) {
hex = "0" + hex;
}
acc = acc + hex;
});
return acc;
};
this.myG.selectAll('.' + this.className)
.data(data)
.enter()
.append('rect')
.attr('class', this.className)
.attr('width', 1.01 * markWidth)
.attr('height', this.bounds.height)
.attr('x', (d: DataPointT, i: number) => {
return this.bounds.xPos + (i * markWidth);
})
.attr('y', this.bounds.yPos)
.attr('fill', (d: DataPointT) => toHex(this.colorFn(this.intensityFn(d))));
}