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

TypeScript d3.select函数代码示例

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

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



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

示例1: highlightCard

 function highlightCard(event) {
   if (panel.highlightCards) {
     let color = d3.select(event.target).style("fill");
     let highlightColor = d3.color(color).darker(2);
     let strokeColor = d3.color(color).brighter(4);
     let current_card = d3.select(event.target);
     tooltip.originalFillColor = color;
     current_card.style("fill", highlightColor)
       .style("stroke", strokeColor)
       .style("stroke-width", 1);
   }
 }
开发者ID:navedalam,项目名称:grafana,代码行数:12,代码来源:rendering.ts


示例2: reWriteCircle

export function reWriteCircle(x: number, y: number) {
  /** get d3 object */
  var circle = d3.select('.fr__sample-circle');
  var test = d3.select('.fr__sample-text');

  circle
    .attr("cx", x)
    .attr("cy", y);

  test
    .attr("x", x - 20)
    .attr("y", y + 10);
}
开发者ID:MSakamaki,项目名称:rxjs-handson,代码行数:13,代码来源:sample.ts


示例3: applyZoomableBehaviour

  /** A method to bind a pan and zoom behaviour to an svg element */
  applyZoomableBehaviour(svgElement, containerElement) {
    let svg, container, zoomed, zoom;

    svg = d3.select(svgElement);
    container = d3.select(containerElement);

    zoomed = () => {
      const transform = d3.event.transform;
      container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
    }

    zoom = d3.zoom().on('zoom', zoomed);
    svg.call(zoom);
  }
开发者ID:lamanhdai,项目名称:js,代码行数:15,代码来源:d3.service.ts


示例4: draw

  static draw(systemEffect : SystemEffect, systemEffectNode, pedalboardView : PedalboardView) {
    let size = pedalboardView.size;

    size.width = Math.max(size.width, size.height) - 20;
    size.height = Math.min(size.width, size.height);

    systemEffect.x = size.width/2;
    systemEffect.y = 400;//size.bottom/2 + 20;

    systemEffectNode = systemEffectNode.data([systemEffect])
      .attr("transform", this.effectPosition());

    const inputs = systemEffectNode.append("g").classed('inputs', true);
    const outputs = systemEffectNode.append("g").classed('outputs', true);

    new InputPlugDrawer(size)
      .drawIn(inputs, true)
        .classed('input', true)
        .classed('connection-target', true);
    new OutputPlugDrawer(pedalboardView, size)
      .drawIn(outputs, true)
      .classed('output', true);

    systemEffect.view = d3.select(systemEffectNode);

    return systemEffectNode;
  }
开发者ID:PedalPi,项目名称:Apk,代码行数:27,代码来源:system-effect-drawer.ts


示例5: resetCardHighLight

 function resetCardHighLight(event) {
   if (panel.highlightCards) {
     d3.select(event.target).style("fill", tooltip.originalFillColor)
       .style("stroke", tooltip.originalFillColor)
       .style("stroke-width", 0);
   }
 }
开发者ID:navedalam,项目名称:grafana,代码行数:7,代码来源:rendering.ts


示例6: expect

		scoreFunctionRenderer.userContainers.nodes().forEach((userContainer: SVGAElement, i: number) => {
			let bars = d3.select(userContainer).selectAll('.' + defs.BAR).nodes();
			let barTops = d3.select(userContainer).selectAll('.' + defs.BAR_TOP).nodes()
			
			bars.forEach((bar: SVGElement, j: number) => {
				let barSelection = d3.select(bar);
				let score = u.scoreFunctions[i].getScore(elements[j]);

				expect(+barSelection.attr(dimension)).to.equal(Math.max(u.heightScale(score), 2));

				let barTopSelection = d3.select(barTops[j]);

				expect(+barTopSelection.attr(dimension)).to.equal(u.rendererConfig.labelOffset);
			});

		});
开发者ID:ValueChart,项目名称:WebValueCharts,代码行数:16,代码来源:DiscreteScoreFunction.test.ts


示例7: drawColorLegend

function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue) {
  const legendElem = $(elem).find('svg');
  const legend = d3.select(legendElem.get(0));
  clearLegend(elem);

  const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
  const legendHeight = legendElem.attr('height');

  const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH;
  const widthFactor = legendWidth / (rangeTo - rangeFrom);
  const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);

  const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, maxValue, minValue);
  legend
    .append('g')
    .attr('class', 'legend-color-bar')
    .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)')
    .selectAll('.heatmap-color-legend-rect')
    .data(valuesRange)
    .enter()
    .append('rect')
    .attr('x', d => Math.round((d - rangeFrom) * widthFactor))
    .attr('y', 0)
    .attr('width', Math.round(rangeStep * widthFactor + 1)) // Overlap rectangles to prevent gaps
    .attr('height', legendHeight)
    .attr('stroke-width', 0)
    .attr('fill', d => colorScale(d));

  drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange);
}
开发者ID:grafana,项目名称:grafana,代码行数:30,代码来源:color_legend.ts


示例8: function

fretboard._drawFretNumbers = function(el, dim, frets) {
  var g = d3.select(el).selectAll('.d3-fret-numbers');

  
  var num = g.selectAll('text')
	.data(frets, function(f : any){return f.n;});

  num.exit()
    .remove();
  
  num
    .transition()
    .duration(ANIMATION_DURATION)
    .attr("x", dim.getFretPosition())
    .attr("y", dim.tpad - 15)
    .text(function(d,i) {return d.n;});

  num.enter().append('text')
    .transition()
    .duration(ANIMATION_DURATION)
    .attr("x", dim.getFretPosition())
    .attr("y", dim.tpad - 15)
    .text(function(d,i) {return d.n;});



};
开发者ID:putterson,项目名称:theory-explorer,代码行数:27,代码来源:d3Fretboard.ts


示例9: drawColorLegend

function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue) {
  const legendElem = $(elem).find('svg');
  const legend = d3.select(legendElem.get(0));
  clearLegend(elem);

  const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
  const legendHeight = legendElem.attr('height');

  let rangeStep = 1;
  if (rangeTo - rangeFrom > legendWidth) {
    rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
  }
  const widthFactor = legendWidth / (rangeTo - rangeFrom);
  const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);

  const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, maxValue, minValue);
  legend
    .selectAll('.heatmap-color-legend-rect')
    .data(valuesRange)
    .enter()
    .append('rect')
    .attr('x', d => d * widthFactor)
    .attr('y', 0)
    .attr('width', rangeStep * widthFactor + 1) // Overlap rectangles to prevent gaps
    .attr('height', legendHeight)
    .attr('stroke-width', 0)
    .attr('fill', d => colorScale(d));

  drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth);
}
开发者ID:CorpGlory,项目名称:grafana,代码行数:30,代码来源:color_legend.ts



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


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript d3.selectAll函数代码示例发布时间:2022-05-24
下一篇:
TypeScript csx.rem函数代码示例发布时间:2022-05-24
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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