TypeScript Selection.append方法代码示例

  private info(main: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, cls: string, label: string, value1: any, value2: any) {
    if (value1 == value2) {
      let attr = main.append("span")
        .classed("attr", true);
      attr.append("span")
        .classed("desc", true)
        .text(label + ": ");
      attr.append("span")
        .classed(cls, true)
        .text(value1);
    } else {
      let attr1 = main.append("span")
        .classed("attr dbefore", true);
      attr1.append("span")
        .classed("desc", true)
        .text(label + ": ");
      attr1.append("span")
        .classed(cls, true)
        .text(value1);

      let attr2 = main.append("span")
        .classed("attr dafter", true);
      attr2.append("span")
        .classed("desc", true)
        .text(label + ": ");
      attr2.append("span")
        .classed(cls, true)
        .text(value2);
    }
  }

  private env_field(element: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, env: EnvironmentItemData) {
    element.append("span")
      .classed("key", true)
      .text(env.name);

    element.append("span")
      .classed("equal", true)
      .text(" = ");

    element.append("span")
      .classed("value", true)
      .text(env.value);

  }

 private env_li(element: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, cls: string, env: EnvironmentItemData) {
   this.env_field(
     element.append("li")
       .classed(cls, true),
     env
   )
 }

  static createList(parent: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, data: ModuleData[], trial_path: string, default_local: string = "0"): FilterObject {
    let filter = ModulesInfoWidget.createFilter(parent, default_local);

    let list = parent.append("ul")
      .classed("mod-list", true);

    filter.on_change(() => {
      list.html("");

      for (var element of data) {
        if (!filter.valid(trial_path, element)) {
          continue;
        }
        var li = list.append("li");
        li.append("div").classed("name", true)
          .text(element.name);
        li.append("div").classed("version", true)
          .text(element.version === null ? "" : element.version);
        li.append("div").classed("clear", true)
        li.append("div").classed("hash", true)
          .attr("title", element.path)
          .text(element.code_hash);
      }
    });
    return filter;
  }

  static createNode(name:string, fn: (name: string, parent: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => void = (parent) => null): HTMLElement {
    let node = document.createElement('div');
    let d3node = d3_select(node);

    let content = d3node.append('div')
      .classed('trial-content', true)

    let selectorDiv = content.append("div")
      .classed("graphselector", true)
      .classed("hide-toolbar", true);

    BaseActivationGraphWidget.graphTypeForm(name, selectorDiv);

    fn(name, selectorDiv);

    BaseActivationGraphWidget.useCacheForm(name, selectorDiv);

    let selectorReload = selectorDiv.append("a")
      .attr("href", "#")
      .classed("link-button reload-button", true)

    selectorReload.append('i')
      .classed("fa fa-refresh", true);

    selectorReload.append('span')
      .text('Reload');

    content.append('div')
      .classed('sub-content', true);

    return node;
  }

	constructor( svg: Selection<BaseType, {}, HTMLElement, any>, dataLength: number) {
		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement

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

		const x = scaleTime().range([0, width])
		const y = scaleLinear().range([height, 0])

		const minModelX = Date.now()

		const idxToTime = (idx: number) => minModelX + idx * 86400 * 1000
		const xAxis = new MyAxis(Orientation.Bottom, x)
			.ticks(4)
			.setTickSize(height)
			.setTickPadding(8 - height)
			.setScale(x)

		const yAxis = new MyAxis(Orientation.Right, y)
			.ticks(4)
			.setTickSize(width)
			.setTickPadding(2 - width)
			.setScale(y)

		const gX = svg.append('g')
			.attr('class', 'axis')
			.call(xAxis.axis.bind(xAxis))

		const gY = svg.append('g')
			.attr('class', 'axis')
			.call(yAxis.axis.bind(yAxis))

		animateBench((elapsed: number) => {
			const minY = -5
			const maxY = 83
			const minX = animateCosDown(dataLength / 2, 0, elapsed)
			const maxX = minX + dataLength / 2

			x.domain([minX, maxX].map(idxToTime))
			y.domain([minY, maxY])

			xAxis.axisUp(gX)
			yAxis.axisUp(gY)
		})
	}

        customForm: (graph: HistoryGraph, form: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => {
          // Toggle Tooltips
          let filterDiv = this.d3node.select(".history-content .filter");

          let scriptOptions = filterDiv.select(".script-options");

          let currentScript = scriptOptions.property("value");

          scriptOptions.html("");

          scriptOptions.append("option")
            .attr("value", "*")
            .text("All Scripts");

          for (let script of data.scripts) {
            scriptOptions.append("option")
              .attr("value", script)
              .text(script);
          }

          scriptOptions.property("value", currentScript);

          let filterToggle = form.append("input")
            .attr("id", "history-" + graph.graphId + "-toolbar-filter-check")
            .attr("type", "checkbox")
            .attr("name", "history-toolbar-filter-check")
            .attr("value", "show")
            .property("checked", filterDiv.classed('visible'))
            .on("change", () => {
              let visible = filterToggle.property("checked");
              filterToggleI
                .classed('fa-circle-o', visible)
                .classed('fa-circle', !visible);
              filterDiv
                .classed('visible', visible)
                .classed('show-toolbar', visible)
                  .classed('hide-toolbar', !visible)
            });
          let filterLabel = form.append("label")
            .attr("for", "history-" + graph.graphId + "-toolbar-filter-check")
          let filterToggleI = filterLabel.append("i")
            .classed('fa', true)
            .classed("fa-circle", !filterDiv.classed('visible'))
            .classed("fa-circle-o", filterDiv.classed('visible'))
        }

  static createNode(): HTMLElement {
    let node = document.createElement('div');
    let d3node = d3_select(node);

    d3node.append('div')
      .classed('trial-info', true)

    return node;
  }

  static createNode(): HTMLElement {
    let node = document.createElement('div');
    let d3node = d3_select(node);

    let content = d3node.append('div')
      .classed('config-content', true)

    let historydiv = content.append("div")

    historydiv.append("h2")
      .text("History Graph")

    let showGraph = historydiv.append("div")
      .classed("graph-attr", true);

    showGraph.append("input")
      .attr("type", "checkbox")
      .attr("name", "show_graph")
      .attr("value", "on")
      .attr("checked", true)
      .classed("show-graph", true)
      .attr("id", "config-show-graph")

    showGraph.append("label")
      .attr("for", "config-show-graph")
      .attr("title", "Open trial graph")
      .text("Show trial graph on selection")

    let showInfo = historydiv.append("div")
      .classed("graph-attr", true);

    showInfo.append("input")
      .attr("type", "checkbox")
      .attr("name", "show_info")
      .attr("value", "on")
      .attr("checked", true)
      .classed("show-info", true)
      .attr("id", "config-show-info")

    showInfo.append("label")
      .attr("for", "config-show-info")
      .attr("title", "Open trial info")
      .text("Show trial information on selection")


    let trialdiv = content.append("div")
    trialdiv.append("h2")
      .text("Trial Graph")

    BaseActivationGraphWidget.graphTypeForm("config", trialdiv);
    BaseActivationGraphWidget.useCacheForm("config", trialdiv);

    return node;
  }

/* Documentation */
function renderExample($target: Selection<any, any, any, any>, specText: string) {
  $target.classed('example', true);
  $target.text('');

  const vis = $target.append('div').attr('class', 'example-vis');

  // Decrease visual noise by removing $schema and description from code examples.
  const textClean = specText.replace(/(\s)+\"(\$schema|description)\": \".*?\",/g, '');
  const code = $target
    .append('pre')
    .attr('class', 'example-code')
    .append('code')
    .attr('class', 'json')
    .text(textClean);
  hljs.highlightBlock(code.node() as any);

  const spec = JSON.parse(specText);

  embedExample(vis.node(), spec, true, !$target.classed('no-tooltip'));
}