TypeScript d3.select函数代码示例

 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);
   }
 }

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);
}

  /** 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);
  }

  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;
  }

 function resetCardHighLight(event) {
   if (panel.highlightCards) {
     d3.select(event.target).style("fill", tooltip.originalFillColor)
       .style("stroke", tooltip.originalFillColor)
       .style("stroke-width", 0);
   }
 }

		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);
			});

		});

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);
}

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;});



};

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);
}