drawDepth()

in code/decision-tree/js/DecisionTree.js [69:161]

• 73 lines of code
• 9 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", mm ? 3 : 6);

    // 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", (d) => {
            return "name" in d.data ? (mm ? 6 : 10) : 0;
          })
          .style("fill", "rgba(.5, .5, .5, 1");

        //  add text
        enterNode
          .append("text")
          .attr("class", "dt-text")
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("x", (d) => d.x)
          .attr("y", (d) => d.y)
          .attr("stroke-width", (d) => {
            return "name" in d.data ? "0px" : "5px";
          })
          .attr("stroke", (d) => viz.strokeColors[+d.data.class])
          // .attr("opacity", depth === 0 ? 0 : 1)
          .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", (d) => {
            return "name" in d.data ? (mm ? 6 : 10) : 0;
          });
        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();
  }