TypeScript d3.select函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [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；未经允许，请勿转载。