drawDepth()

in code/decision-tree/js/PerturbedDecisionTree.js [77:162]

• 77 lines of code
• 4 McCabe index (conditional complexity)

  drawDepth(depth) {
    const viz = this;
    const trans = transition().duration(500);
    // track currently selected depth
    let depthFilter = (d) => d.depth <= depth;

    // normalize height (y value) at each depth
    this.nodes.forEach((d) => (d.y = d.depth * viz.levelHeight));
    //     append splits if they occur, otherwise dont
    const splitNodes = this.nodes.filter(
      (d) => d.depth === depth && "name" in d.data
    );

    // filter links to desired depth
    let link = this.g
      .selectAll("path.link")
      .data(this.links.filter((d) => d.source.depth < depth));

    let linkEnter = link
      .join("path")
      .attr("class", "link")
      // .transition(trans)
      .attr("d", pathCurve)
      .attr("fill", "none")
      .attr("stroke", "#555")
      .attr("stroke-opacity", 0.58)
      .attr("stroke-width", 3);

    // draw circles
    let node = this.g.selectAll("g.node").data(this.nodes.filter(depthFilter));

    let treeNodes = node.join(
      (enter) => {
        const enterNode = enter.append("g").attr("class", "node");

        // add circle
        enterNode
          .append("circle")
          .attr("cx", (d) => d.x)
          .attr("cy", (d) => d.y)
          .attr("r", 0)
          // .transition(trans)
          .attr("r", 5)
          .style("fill", "rgba(.5, .5, .5, 1");

        //  add text
        enterNode
          .append("text")
          .attr("class", "pertubation-text")
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("x", (d) => d.x)
          .attr("y", (d) => d.y)
          .attr("font-size", (d) => fontSize(d.data))

          .attr("stroke", (d) => viz.strokeColors[+d.data.class])
          .text((d) => {
            return "name" in d.data
              ? d.data.name
              : viz.classNames[+d.data.class];
          });
      },
      (update) => {
        const updateNode = update;
        // update circle size
        updateNode
          .selectAll("circle")
          // .transition(trans)
          .attr("r", 5);
        updateNode.selectAll("text").attr("opacity", 1);
      },
      (exit) => {
        const exitNode = exit;
        // remove circle
        exitNode
          .selectAll("circle")
          // .transition(trans)
          .attr("fill", "red")
          .attr("r", 0);
        // remove text
        exitNode.selectAll("text").attr("opacity", 0);
      }
    );

    selectAll("g.node").raise();
  }