var gallery;var waffles = [];var data;var days = [\'工作日活动\', \'周末活动\', \'其他\', \'最喜欢的活动\', \'多久吃一次晚餐\', &

 var gallery;
var waffles = [];
var data;
var days = ["Activities Weekday", "Activities Weekends", "Other", "Favourite Activity", "How often dinner", "How often friends", "Activity to do more"];
var values = ['Watch TV', 'Play Computer Games', 'Engage in Hobbies', 'Go out for Dinner', 'Go to the Pub', 'Watch a show', 'Go for a walk', 'Meet Friends', 'Weekend Away', 'Watch a band', 'Other'];

function preload() {
  // Load the data here so it's ready before setup runs.
  data = loadTable('./data/myData.csv', 'csv', 'header', function() {
    console.log("Data loaded successfully");
  }, function() {
    console.log("Error loading data");
  });
}

function setup() {
  // Create a canvas to fill the content div from index.html.
  var c = createCanvas(1024, 576);
  c.parent('app');

  // Create a new gallery object.
  gallery = new Gallery();

  // Add other visualization objects to the gallery.
  gallery.addVisual(new TechDiversityRace());
  gallery.addVisual(new TechDiversityGender());
  gallery.addVisual(new PayGapByJob2017());
  gallery.addVisual(new PayGapTimeSeries());
  gallery.addVisual(new ClimateChange());
  gallery.addVisual(new Offences());
  gallery.addVisual(new PetrolPrices());
//  gallery.selectVisual(new Waffle());
    
    
   // Create one Waffle instance that manages all seven waffle charts.
  if (data && data.getRowCount() > 0) {
   gallery.addVisual(new Waffle(20, 20, 200, 200, 10, 10, data, days, values));
//    gallery.addVisual(ne Waffle()); // Add the single Waffle visualization to the gallery
    gallery.selectVisual(waffles); // Select the Waffle visual by default
  } else {
    console.log("Data is not loaded or empty.");
  }
}


function draw() {
  background(255);

  if (gallery.selectedVisual != null) {
    gallery.selectedVisual.draw();
      
      for(var i = 0; i < days.length; i++){
          waffles[i].draw();
        
      }
      for(var i = 0; i < waffles.length; i++){
          waffles[i].checkMouse(mouseX, mouseY)
      }
  }
} 

这是脚本

function Waffle(x, y, width, height, boxes_across, boxes_down, table, days, values) {
  this.name = "Evening Activities";
  this.id = "Waffle";

  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.boxes_across = boxes_across;
  this.boxes_down = boxes_down;
  this.table = table;
  this.days = days;
  this.values = values;
  this.currentDayIndex = 0; // Track the currently displayed day
  this.boxes = [];
  this.categories = [];
  this.loaded = false;

  this.preload = function() {
    // Load data if needed
    this.loaded = true;
    this.setup();
  };

  this.setup = function() {
    if (!this.loaded) {
      console.log('Data not yet loaded');
      return;
    }
    this.addCategories(this.days[this.currentDayIndex]);
    this.addBoxes();
  };

  this.addCategories = function(day) {
    console.log('Adding categories for day:', day);
    var colours = ["aqua", "yellow", "purple", "red", "blue", "green", "orange", "pink", "black", "grey"];
    this.categories = []; // Reset categories for the new day
    for(var i = 0; i < this.values.length; i++) {
      this.categories.push({
        "name": this.values[i],
        "count": 0,
        "colour": colours[i % colours.length]
      });
    }

    var column = this.table.getColumn(day);
    for(var i = 0; i < column.length; i++) {
      var catLocation = this.categoryLocation(column[i]);
      if(catLocation != -1) {
        this.categories[catLocation].count++;
      }
    }

    for(var i = 0; i < this.categories.length; i++) {
      this.categories[i].boxes = Math.round((this.categories[i].count / column.length) * (this.boxes_down * this.boxes_across));
    }
    console.log('Categories added for day:', this.categories);
  };

  this.categoryLocation = function(categoryName) {
    for(var i = 0; i < this.categories.length; i++) {
      if(categoryName === this.categories[i].name) {
        return i;
      }
    }
    return -1;
  };

  this.addBoxes = function() {
    console.log('Adding boxes for day');
    var currentCategory = 0;
    var currentCategoryBox = 0;
    const boxWidth = this.width / this.boxes_across;
    const boxHeight = this.height / this.boxes_down;

    this.boxes = []; // Reset boxes for the new day
    for(var i = 0; i < this.boxes_down; i++) {
      this.boxes.push([]);
      for(var j = 0; j < this.boxes_across; j++) {
        if (currentCategoryBox === this.categories[currentCategory].boxes) {
          currentCategoryBox = 0;
          currentCategory++;
        }
        this.boxes[i].push(new Box(this.x + (j * boxWidth), this.y + (i * boxHeight), boxWidth, boxHeight, this.categories[currentCategory]));
        currentCategoryBox++;
      }
    }
    console.log('Boxes added for day:', this.boxes);
  };

  this.draw = function() {
    for(var i = 0; i < this.boxes.length; i++) {
      for(var j = 0; j < this.boxes[i].length; j++) {
        if(this.boxes[i][j].category != undefined) {
          this.boxes[i][j].draw();
        }
      }
    }
  };

  this.checkMouse = function (mouseX, mouseY) {
    for(var i = 0; i < this.boxes.length; i++) {
      for(var j = 0; j < this.boxes[i].length; j++) {
        if(this.boxes[i][j].category != undefined) {
          const mouseOver = this.boxes[i][j].mouseOver(mouseX, mouseY);
          if(mouseOver != false) {
            push();
            fill(255);
            textSize(20);
            const tWidth = textWidth(mouseOver);
            textAlign(LEFT, TOP);
            rect(mouseX, mouseY, tWidth + 20, 40);
            fill(255);
            text(mouseOver, mouseX + 10, mouseY + 10);
            pop();
            break;
          }
        }
      }
    }
  };

//  this.updateDay = function(index) {
//    if (index >= 0 && index < this.days.length) {
//      this.currentDayIndex = index;
//      this.setup(); // Update the Waffle table for the new day
//    }
//  };
}

然后另一个

function Box(x, y, width, height, category) {
    
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.category = category;

    this.mouseOver = function(mouseX, mouseY) {
        if (mouseX > this.x && mouseX < this.x + this.width &&
            mouseY > this.y && mouseY < this.y + this.height) {
            return this.category.name;
        }
        return false;
    };

    this.draw = function() {
        fill(this.category.colour);
        rect(this.x, this.y, this.width, this.height);
    };
}

我正在制作一个 vis 应用程序，并且所有其他区域都已找到，但无法为每天的代码列获得 7 个华夫饼图表，这非常令人沮丧。我要么得到 7 个按钮，要么得到 1 个按钮 1 个图表。

在此处输入图像描述， 图像将显示我的意思。

我试过只将华夫饼添加到画廊，然后它阻止其他人工作，再次循环，我得到了彼此可视化的框。它可能很小，但我就是想不通

• waffle
• waffle-chart