area_coverage_mingwei.js

function areaCoverage(labelDoms){
  // labelDoms - a list of DOM elements for the labels.
  // If you are using d3, it is yourLabelSelection.nodes(), see:
  // https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_nodes
  // d.getBoundingClientRect() gives you the bounding box (={x, y, width, height, ...}) of the label element in pixels, and it automatically considers the current zoom level of the view.
  let labelArea = 0;
  let xmin = +Infinity,
      xmax = -Infinity,
      ymin = +Infinity,
      ymax = -Infinity;
  for(let d of labelDoms){
    let bbox = d.getBoundingClientRect();
    labelArea += bbox.width * bbox.height;
    if(bbox.x < xmin){
      xmin = bbox.x;
    }
    if(bbox.x + bbox.width > xmax){
      xmax = bbox.x + bbox.width;
    }
    if(bbox.y < ymin){
      ymin = bbox.y;
    }
    if(bbox.y + bbox.height > ymax){
      ymax = bbox.y + bbox.height;
    }
  }
  let boundingArea = (ymax - ymin) * (xmax - xmin);
  return labelArea / boundingArea;
}