TypeScript Selection.selectAll方法代码示例

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

  update(source: VisibleTrialNode) {
    let treeData = this.tree(this.root);
    this.nodes = treeData.descendants();

    var node = this.g.selectAll('g.node')
      .data(this.nodes, (d: any) => {return d.id || (d.id = ++this.i); });

    let validNodes: { [key: string]: VisibleTrialNode } = {};
    this.nodes.forEach((node: VisibleTrialNode) => {
      validNodes[node.data.index] = node;
    });

    var edges: VisibleTrialEdge[] = this.alledges.filter((edge: TrialEdgeData) => {
      let source: VisibleTrialNode = validNodes[edge.source];
      let target: VisibleTrialNode = validNodes[edge.target];

      if (source == undefined || target == undefined) {
        return false;
      }
      return true;
    }).map((edge) => {
      let source: VisibleTrialNode = validNodes[edge.source];
      let target: VisibleTrialNode = validNodes[edge.target];
      var copy: any = { ...edge };
      copy.id = edge.source + "-" + edge.target;
      copy.source = source;
      copy.target = target;
      return copy as VisibleTrialEdge;
    });

    this.updateNodes(source, node);
    this.updateLinks(source, edges);
    this.updateLinkLabels(edges);

    // Store old positions for transition
    this.nodes.forEach(function(d: VisibleTrialNode, i: number){
      d.x0 = d.x;
      d.y0 = d.y;
    });

    this.wrapText();
  }

  private updateLinkLabels(edges: VisibleTrialEdge[]) {
    var labelPath = this.g.selectAll(".label_text")
      .data(edges, (d: VisibleTrialEdge) => d.id);

    var labelEnter = labelPath.enter().append("text")
      .attr("class", "label_text")
      .attr("font-family", "sans-serif")
      .attr("font-size", this.config.labelFontSize + "px")
      .attr("pointer-events", "none")
      .attr("fill", "#000")
      .attr("text-anchor", "middle")
      .attr("dx", (d: VisibleTrialEdge) => {
        if (d.source.x == d.target.x) {
          return 29;
        }
        return (Math.abs(d.source.x - d.target.x) - 10) / 2;
      })
      .attr("dy", -3)
      .attr("id", (d: VisibleTrialEdge, i: number) => {
        return "pathlabel-" + this.graphId + "-" + d.id;
      })
      .append("textPath")
      .attr("xlink:href", (d: VisibleTrialEdge, i: number) => {
        return "#pathId-" + this.graphId + "-" + d.id;
      })
      .text((d: VisibleTrialEdge) => {
        if (d.type === 'initial') {
          return '';
        }
        if (this.t1 == this.t2 || !d.count[this.t2]) {
          return d.count[this.t1].toString();
        } else if (!d.count[this.t1]) {
          return d.count[this.t2].toString();
        }
        return d.count[this.t1] + ', ' + d.count[this.t2];
      });

    labelEnter.merge(labelPath)

    labelPath.exit().remove();
  }

  private updateLinks(source: VisibleTrialNode, edges: VisibleTrialEdge[]) {
    var link = this.g.selectAll('path.link')
      .data(edges, (d: VisibleTrialEdge) => d.id);

    // Enter any new links at the parent's previous position.
    var linkEnter = link.enter().insert('path', "g")
      .attr("class", "link")
      .attr("id", (d: VisibleTrialEdge, i: number) => {
        return "pathId-" + this.graphId + "-" + d.id;
      })
      .attr("fill", "none")
      .attr("stroke-width", "1.5px")
      .attr('d', (d: VisibleTrialEdge) => {
        var o = {y: source.y0, x: source.x0}
        return diagonal(o, o)
      })
      .attr("marker-end", (d: VisibleTrialEdge) => {
        let count = 0;
        for (let trial_id in d.count) {
          if (trial_id == this.t1.toString()) {
            count += 1;
          }
          if (trial_id == this.t2.toString()) {
            count += 2;
          }
        }
        if (count == 0 || count == 3) { // Single trial or diff
          return "url(#" + this.graphId + "-end)";
        }
        if (count == 1) { // First trial
          return "url(#" + this.graphId + "-endbefore)";
        }
        if (count == 2) { // Second trial
          return "url(#" + this.graphId + "-endafter)";
        }
        return "";
      })
      .attr('stroke', (d: VisibleTrialEdge) => {
        if (d.type === 'sequence') {
          return '#07F';
        }
        return '#666';
      })
      .attr('stroke-dasharray', (d: VisibleTrialEdge) => {
        if (d.type === 'return') {
          return '10,2';
        }
        return 'none';
      });

    // UPDATE
    var linkUpdate = linkEnter.merge(link)

    // Transition back to the parent element position
    linkUpdate.transition()
      .duration(this.config.duration)
      .attr('d', (d: VisibleTrialEdge) => {
        if (d.source.dy == undefined) {
          d.source.dy = 0;
        }
        if (d.target.dy == undefined) {
          d.target.dy = 0;
        }

        let
          sd = d.source.data,
          td = d.target.data,
          x1 = d.source.x,
          y1 = d.source.y + d.source.dy,
          x2 = d.target.x,
          y2 = d.target.y + d.target.dy,
          dx = x2 - x1,
          dy = y2 - y1,
          theta = Math.atan(dx / dy),
          phi = Math.atan(dy / dx),
          r = 10 + 2,
          sin_theta = r * Math.sin(theta),
          cos_theta = r * Math.cos(theta),
          sin_phi = r * Math.sin(phi),
          cos_phi = r * Math.cos(phi),
          m1 = (y2 > y1) ? 1 : -1,
          m2 = (x2 > x1) ? -1 : 1;
        if (d.type === 'initial') {
          // Initial
          return `M ${(x2 - 20)},${(y2 - 20)}
            L ${(x2 - r / 2.0)},${(y2 - r / 2.0)}`;
        } else if (d.type === 'call' || d.type == 'return') {
          // Call/Return
          x1 += m1 * sin_theta;
          x2 += m2 * cos_phi;
          y1 += m1 * cos_theta;
          y2 += m2 * sin_phi;
          if (dx === 0) {
            if (y1 > y2) {
              //y1 -= 10
              y2 += 20
            } else {
              //y1 += 10
              y2 -= 20
            }
//.........这里部分代码省略.........

 wrapText() {
   this.svg.selectAll(".node text")
       .call(wrap, this.config.nodeSizeX);
 }

 .on("change", () => {
   this.config.labelFontSize = labelFontSize.property("value");
   this.svg.selectAll("text.label_text").attr("font-size", this.config.labelFontSize);
 })

	private drawChart(svg: Selection<BaseType, {}, HTMLElement, any>, data: Array<[number, number]>) {
		this.data = data

		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement

		const width = div.clientWidth
		const height = div.clientHeight

		svg.attr('width', width)
		svg.attr('height', height)

		// это просто извращённый способ добавить
		// в группу два элемента <g>
		// .enter() это часть фреймворка d3 для работы
		// с обновлениями, но мы пока игнорируем и
		// делаем обновления руками
		const views = svg
			.selectAll('g')
			.data([0, 1])
			.enter()
				.append('g')
				.attr('class', 'view')
		const [viewNy, viewSf] = views.nodes() as SVGGElement[]

		const path = views.append('path')

		// тут наши перевернутые базисы которые мы
		// cтеснительно запрятали в onViewPortResize
		// таки вылезли

		// на видимую область можно смотреть абстрактно
		// как на отдельное пространство

		// ось Y перевернута - что выглядит на языке
		// базисов как перевернутый базис
		//
		// а на языке векторов как разность точек, которая
		// у X положительна а у Y отрицательна
		// ну и наоборот если перевернем первый базис
		// то второй тоже перевернется но переворачивание
		// по-прежнему выглядит как умножение разности на -1
		//	
		// короче неважно какой из них считать первичным
		// в любом случае один перевернут по отношению к другому
		const bScreenXVisible = new AR1Basis(0, width)
		const bScreenYVisible = new AR1Basis(height, 0)

		// интерфейс с лигаси-кодом. Некоторая многословость простительна
		const x = scaleTime().range(bScreenXVisible.toArr())
		const yNy = scaleLinear().range(bScreenYVisible.toArr())
		const ySf = scaleLinear().range(bScreenYVisible.toArr())

		const pathTransformNy = new MyTransform(svg.node() as SVGSVGElement, viewNy)
		const pathTransformSf = new MyTransform(svg.node() as SVGSVGElement, viewSf)

		const updateScaleX = (bIndexVisible: AR1Basis) => {
			const bTimeVisible = bIndexVisible.transformWith(this.idxToTime)
			x.domain(bTimeVisible.toArr())
		}

		// bIndexVisible is the visible ends of model
		// affine space at chart edges.
		// They are updated by zoom and pan or animation
		// but unaffected by arrival of new data
		const updateScaleY = (bIndexVisible: AR1Basis, tree: SegmentTree, pathTransform: MyTransform, yScale: any) => {
			// рассчитается деревом отрезков, но все равно долго
			// так что нужно сохранить чтобы
			// два раза не перевычислять для линий графиков и для осей
			const bTemperatureVisible = this.bTemperatureVisible(bIndexVisible, tree)
			// референсное окно имеет достаточно странный вид
			// по горизонтали у нас полный диапазон
			// а по вертикали только видимый
			// надеюсь это исправится при переходе от отдельных
			// пространств по Х и Y к единому пространству
			// являющeмся их прямым произведением
			pathTransform.onReferenceViewWindowResize(this.bIndexFull, bTemperatureVisible)

			yScale.domain(bTemperatureVisible.toArr())
		}

		this.treeNy = new SegmentTree(this.data, this.data.length, this.buildSegmentTreeTupleNy)
		this.treeSf = new SegmentTree(this.data, this.data.length, this.buildSegmentTreeTupleSf)

		// в референсном окне видны все данные, поэтому
		// передаем bIndexFull в качестее bIndexVisible
		updateScaleX(this.bIndexFull)
		updateScaleY(this.bIndexFull, this.treeNy, pathTransformNy, yNy)
		updateScaleY(this.bIndexFull, this.treeSf, pathTransformSf, ySf)

		const xAxis = new MyAxis(Orientation.Bottom, x)
			.ticks(4)
			// изменять размер тиков надо при изменении
			// размеров окна
			.setTickSize(height)
			.setTickPadding(8 - height)

		const yAxis = new MyAxis(Orientation.Right, yNy, ySf)
			.ticks(4, 's')
			.setTickSize(width)
//.........这里部分代码省略.........