TypeScript d3-hierarchy.tree函數代碼示例

export function makeHierarchyTree(t : IProofTree) : d3Hierarchy.HierarchyPointNode<IProofTreeNode> {
  const hierarchyRoot = d3Hierarchy.hierarchy(
    t.rootNode,
    (node : IProofTreeNode) => {
      console.log('Computing some children')
      // fake nodes are used to trick the layout engine into spacing
      // childrenless nodes appropriately
      if (node instanceof FakeNode) { return [] }
      const viewChildren = node.getViewChildren()
      // in order to trick d3 into displaying tactics better add fake
      // children to tactic nodes that solve their goal
      if (node instanceof TacticGroupNode && viewChildren.length === 0) {
        return [new FakeNode(t, node)]
      }
      if (viewChildren === undefined) {
        debugger
      }
      return viewChildren
    }
  )
  return d3Hierarchy.tree<IProofTreeNode>()
    .separation(d => {
      // TODO: now that I put fake nodes, still need this?
      // TODO: this just won't work, need invisible children
      // for tactics without children
      return 1 / (1 + Math.pow(d.depth, 3))
    })
    (hierarchyRoot)
}

  constructor(graphId:string, div: any, config: any={}) {
    this.i = 0;

    let defaultConfig: TrialConfig = {
      customSize: function(g:TrialGraph) {
        return [
          g.config.width,
          g.config.height,
        ]
      },
      customMouseOver: (g:TrialGraph, d: VisibleTrialNode, name: string) => false,
      customMouseOut: (g:TrialGraph, d: VisibleTrialNode) => false,
      customForm: (g: TrialGraph, form: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => null,

      duration: 750,

      top: 50,
      right: 30,
      bottom: 80,
      left: 30,

      width: 900,
      height: 500,

      useTooltip: false,
      fontSize: 10,
      labelFontSize: 10,

      nodeSizeX: 47,
      nodeSizeY: 100,
    };
    this.config = (Object as any).assign({}, defaultConfig, config);


    this.graphId = graphId;

    this.zoom = d3_zoom()
      .on("zoom", () => this.zoomFunction())
      .on("start", () => d3_select('body').style("cursor", "move"))
      .on("end", () => d3_select('body').style("cursor", "auto"))
      .wheelDelta(() => {
        return -d3_event.deltaY * (d3_event.deltaMode ? 120 : 1) / 2000;
      })

    this.div = d3_select(div)
    let form = d3_select(div)
      .append("form")
      .classed("trial-toolbar", true);

    this.svg = d3_select(div)
      .append("div")
      .append("svg")
      .attr("width", this.config.width)
      .attr("height", this.config.height)
      .call(this.zoom);

    this.createMarker('end', 'enormal', 'black');
    this.createMarker('endbefore', 'ebefore', 'red');
    this.createMarker('endafter', 'eafter', 'green');

    this.g = this.svg.append("g")
      .attr("id", this._graphId())
      .attr("transform", "translate(0,0)")
      .classed('TrialGraph', true);

    this.tree = d3_tree()
      .nodeSize([
        this.config.nodeSizeX,
        this.config.nodeSizeY
      ]);

    // **Toolbar**
    this.createToolbar(form);

    // Tooltip
    this.tooltipDiv = d3_select("body").append("div")
      .attr("class", "now-tooltip now-trial-tooltip")
      .style("opacity", 0)
      .on("mouseout", () => {
        this.closeTooltip();
      });

    // Zoom
    this.svg
      .call(this.zoom.transform, d3_zoomIdentity.translate(
        this.config.left + this.config.width / 2,
        this.config.top
      ))
  }

});

// copy() --------------------------------------------------------------------

let copiedClusterNode: d3Hierarchy.HierarchyPointNode<HierarchyDatumWithParentId>;
copiedClusterNode = clusterRootNode.copy();

// -----------------------------------------------------------------------
// Tree
// -----------------------------------------------------------------------

// Create tree layout generator =======================================

let treeLayout: d3Hierarchy.TreeLayout<HierarchyDatumWithParentId>;

treeLayout = d3Hierarchy.tree<HierarchyDatumWithParentId>();

// Configure tree layout generator ====================================

// size() ----------------------------------------------------------------

treeLayout = treeLayout.size(null);
treeLayout = treeLayout.size([200, 200]);

size = treeLayout.size();

// nodeSize() ------------------------------------------------------------

treeLayout = treeLayout.nodeSize(null);
treeLayout = treeLayout.nodeSize([10, 10]);
size = treeLayout.nodeSize();