TypeScript d3.selectAll函數代碼示例

export function sample1() {

  var g = d3.selectAll('.sample1');
  let svg = g.append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .attr('class', 'fr__sample__svg');

  // svg render
  svg
    .append("circle")
    .attr("cx", 25)
    .attr("cy", 25)
    .attr("r", 25)
    .style("fill", "purple")
    .attr('class', 'fr__sample-circle');

  svg
    .append("text")
    .attr('x', 5)
    .attr('y', 32)
    .attr('font-size', 20)
    .attr('fill', 'red')
    .text('FOO')
    .attr('class', 'fr__sample-text');
}

export function drawCharts (data: any[]) {
	const charts: draw.TimeSeriesChart[] = []
	let newZoom: any = null
	const minX = new Date()
	let j = 0

	function onZoom() {
		const z = d3.event.transform.toString()
		if (z == newZoom) return

		newZoom = z
		charts.forEach(c => c.zoom(d3.event.transform))
	}

	d3.selectAll('svg').select(function() {
		const chart = new draw.TimeSeriesChart(d3.select(this), minX, 86400000, data, buildSegmentTreeTuple, onZoom)
		charts.push(chart)
	})

	setInterval(() => {
		const newData = data[j % data.length]
		charts.forEach(c => c.updateChartWithNewData([newData == undefined ? undefined : newData.NY, newData == undefined ? undefined : newData.SF]))
		j++
	}, 1000)
}

export function unhighlightFocusChartAnnotation() {
  const annotations = d3.selectAll('.mlAnnotation');

  annotations.each(function() {
    // @ts-ignore
    const element = d3.select(this);

    element.selectAll('.mlAnnotationTextRect').classed('mlAnnotationTextRect-isBlur', false);
    element
      .selectAll('.mlAnnotationRect')
      .classed('mlAnnotationRect-isHighlight', false)
      .classed('mlAnnotationRect-isBlur', false);
    element.selectAll('.mlAnnotationText').classed('mlAnnotationText-isBlur', false);
  });
}

export function highlightFocusChartAnnotation(annotation: Annotation) {
  const annotations = d3.selectAll('.mlAnnotation');

  annotations.each(function(d) {
    // @ts-ignore
    const element = d3.select(this);

    if (d._id === annotation._id) {
      element.selectAll('.mlAnnotationRect').classed('mlAnnotationRect-isHighlight', true);
    } else {
      element.selectAll('.mlAnnotationTextRect').classed('mlAnnotationTextRect-isBlur', true);
      element.selectAll('.mlAnnotationText').classed('mlAnnotationText-isBlur', true);
      element.selectAll('.mlAnnotationRect').classed('mlAnnotationRect-isBlur', true);
    }
  });
}

			it('should decrease the objective weight by exactly one percent', () => {
				resizeWeightsInteraction.lastRendererUpdate = u;

				let objective = u.valueChart.getAllPrimitiveObjectives()[0];
				let aaron = u.valueChart.getUsers()[0];
				let previousWeight = aaron.getWeightMap().getNormalizedObjectiveWeight(objective.getId());

				let labelDatum: LabelData = { objective: objective, weight: previousWeight, depth: null, depthOfChildren: 0, subLabelData: null }

				let selection = d3.selectAll('rect').data([labelDatum]).enter().append('rect');

				let event: any = {} 
				event.target = selection.node();
				event.pumpType = PumpType.Decrease;

				resizeWeightsInteraction['onPump'](event);

				expect(aaron.getWeightMap().getNormalizedObjectiveWeight(objective.getId())).to.equal(previousWeight - 0.01);
			});

	function d3selectAll(selector) { 
		return d3.selectAll(selector); 
	}

 static addArrowHead(svgClassName: string) {
     let svg = d3.selectAll("svg." + svgClassName);
     d3.text("built/viewThreadTreeElements/threadView/arrow.html", d => {
         svg.insert('defs', ":first-child").html(d)
     });                    
 }

  // call to propagate changes to graph
  updateGraphVisibility() {
    const view = this;
    const graph = this.graph;
    const state = this.state;
    if (!graph) return;

    const filteredEdges = [...graph.filteredEdges(function (e) {
      return e.source.visible && e.target.visible;
    })];
    const selEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>("path").data(filteredEdges, edgeToStr);

    // remove old links
    selEdges.exit().remove();

    // add new paths
    const newEdges = selEdges.enter()
      .append('path');

    newEdges.style('marker-end', 'url(#end-arrow)')
      .attr("id", function (edge) { return "e," + edge.stringID(); })
      .on("click", function (edge) {
        d3.event.stopPropagation();
        if (!d3.event.shiftKey) {
          view.selectionHandler.clear();
        }
        view.selectionHandler.select([edge.source, edge.target], true);
      })
      .attr("adjacentToHover", "false")
      .classed('value', function (e) {
        return e.type == 'value' || e.type == 'context';
      }).classed('control', function (e) {
        return e.type == 'control';
      }).classed('effect', function (e) {
        return e.type == 'effect';
      }).classed('frame-state', function (e) {
        return e.type == 'frame-state';
      }).attr('stroke-dasharray', function (e) {
        if (e.type == 'frame-state') return "10,10";
        return (e.type == 'effect') ? "5,5" : "";
      });

    const newAndOldEdges = newEdges.merge(selEdges);

    newAndOldEdges.classed('hidden', e => !e.isVisible());

    // select existing nodes
    const filteredNodes = [...graph.nodes(n => n.visible)];
    const allNodes = view.visibleNodes.selectAll<SVGGElement, GNode>("g");
    const selNodes = allNodes.data(filteredNodes, nodeToStr);

    // remove old nodes
    selNodes.exit().remove();

    // add new nodes
    const newGs = selNodes.enter()
      .append("g");

    newGs.classed("turbonode", function (n) { return true; })
      .classed("control", function (n) { return n.isControl(); })
      .classed("live", function (n) { return n.isLive(); })
      .classed("dead", function (n) { return !n.isLive(); })
      .classed("javascript", function (n) { return n.isJavaScript(); })
      .classed("input", function (n) { return n.isInput(); })
      .classed("simplified", function (n) { return n.isSimplified(); })
      .classed("machine", function (n) { return n.isMachine(); })
      .on('mouseenter', function (node) {
        const visibleEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>('path');
        const adjInputEdges = visibleEdges.filter(e => e.target === node);
        const adjOutputEdges = visibleEdges.filter(e => e.source === node);
        adjInputEdges.attr('relToHover', "input");
        adjOutputEdges.attr('relToHover', "output");
        const adjInputNodes = adjInputEdges.data().map(e => e.source);
        const visibleNodes = view.visibleNodes.selectAll<SVGGElement, GNode>("g");
        visibleNodes.data<GNode>(adjInputNodes, nodeToStr).attr('relToHover', "input");
        const adjOutputNodes = adjOutputEdges.data().map(e => e.target);
        visibleNodes.data<GNode>(adjOutputNodes, nodeToStr).attr('relToHover', "output");
        view.updateGraphVisibility();
      })
      .on('mouseleave', function (node) {
        const visibleEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>('path');
        const adjEdges = visibleEdges.filter(e => e.target === node || e.source === node);
        adjEdges.attr('relToHover', "none");
        const adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source));
        const visibleNodes = view.visibleNodes.selectAll<SVGPathElement, GNode>("g");
        visibleNodes.data(adjNodes, nodeToStr).attr('relToHover', "none");
        view.updateGraphVisibility();
      })
      .on("click", d => {
        if (!d3.event.shiftKey) view.selectionHandler.clear();
        view.selectionHandler.select([d], undefined);
        d3.event.stopPropagation();
      })
      .call(view.drag);

    newGs.append("rect")
      .attr("rx", 10)
      .attr("ry", 10)
      .attr('width', function (d) {
        return d.getTotalNodeWidth();
//.........這裏部分代碼省略.........

			resize.eval = function() {
				d3.selectAll('svg').remove()
				d3.select('.charts').selectAll('div').append('svg')
				common.drawCharts(data)
			}

			it('should call initialize(u: RendererUpdate) to initialize the interaction', () => {
				sortAlternativesInteraction.toggleAlternativeSorting(SortAlternativesType.None, d3.selectAll('.null'), u);

				expect(sortAlternativesInteraction.lastRendererUpdate).to.deep.equal(u);
				expect(sortAlternativesInteraction['originalAlternativeOrder']).to.deep.equal(new AlternativesRecord(u.valueChart.getAlternatives()));
			});