addButtons()

in code/decision-tree/js/EntropyBubble.js [309:375]

• 54 lines of code
• 7 McCabe index (conditional complexity)

  addButtons() {
    // // add buttons to svg as rects
    const borderMarginX = mmobile ? 8 : 12;
    const borderMarginY = mmobile ? 3 : 5;
    const self = this;
    this.buttonData = [
      { class: "positive", stage: "add", label: "Add" },
      { class: "positive", stage: "remove", label: "Remove" },
      { class: "negative", stage: "add", label: "Add" },
      { class: "negative", stage: "remove", label: "Remove" },
    ];

    this.entroypG
      .selectAll(".entropy-button-text")
      .data(this.buttonData)
      .join("text")
      .attr("class", "entropy-button-text")
      .attr("text-anchor", "middle")
      .attr("x", (d) =>
        d.class === "positive"
          ? self.positionXScale(0)
          : self.positionXScale(10)
      )
      .attr("y", (d) =>
        d.stage === "add" ? self.positionYScale(9.5) : self.positionYScale(11)
      )
      .text((d) => d.label);

    // add bbox elements to data
    // note, this has to be done after
    // adding text to dom, so we can
    // get correct bbox of text elements
    this.entroypG
      .selectAll(".entropy-button-text")
      .join(this.buttonData)
      .each(function (d) {
        d.bbox = this.getBBox();
      });

    // add box around text to mimic button
    this.entroypG
      .selectAll(".entropy-button-rect")
      .data(this.buttonData)
      .join("rect")
      .attr("class", "entropy-button-rect")
      .attr("id", (d) => `${d.class}-${d.stage}`)
      .attr("text-anchor", "middle")
      // .attr("x", (d) => this.groups[d.name].x - d.bbox.width * 0.5)
      .attr("x", (d) =>
        d.class === "positive"
          ? self.positionXScale(10) - d.bbox.width * 0.5
          : self.positionXScale(0) - d.bbox.width * 0.5
      )
      .attr("y", (d) =>
        d.stage === "add" ? self.positionYScale(9.5) : self.positionYScale(11)
      )
      .attr("width", (d) => d.bbox.width + 2 * borderMarginX)
      .attr("height", (d) => d.bbox.height + 2 * borderMarginY)
      .attr("transform", function (d) {
        return `translate(-${borderMarginX}, -${d.bbox.height * 0.8 + borderMarginY})`;
      })
      // .attr("visibility", "hidden")
      .attr("stroke", (d) => "white");

    // raise text over box
    this.entroypG.selectAll("text.entropy-button-text").raise();
  }