stirpie

It's dispensable to have resolving overlapping labels for a pie chart on most occasions, but whenever people want it and without one, it's critical. stirpie is a simple library to resolve overlapping labels outside of a pie chart, which has already been sorted in descending order. Click here to edit the example lively.

Usage

Importing stirpie

<!-- as a UMD bundle  -->
<script src="https://unpkg.com/stirpie@0.2.0/stirpie.min.js"></script>

// as an ES module
import stirpie from "stirpie";

// as a CommonJS module
const stirpie = require("stirpie");

Resolving labels

Preparing sample data:

// sample1 has already been sorted in descending order
const sample1 = await d3.json("example/sample1.json");

Creating pie data:

const radius = 128;
const pie = d3
  .pie()
  .startAngle(-0.5 * Math.PI)
  .endAngle(1.5 * Math.PI)
  .padAngle(1 / radius)(sample1.values);

Initialize labels' width/height:

const dimensions = sample1.labels.map((d) => {
  let width, height;
  // e.g. getBBox() from SVGElement, or calculating as you like
  // ...
  return {
    width,
    height,
  };
});

Resolving labels as many as possible:

// or assigns [radius + 25, radius + 50] to use an ellipse
const orbitRadius = radius + 25;
const resolver = stirpie(dimensions, pie, orbitRadius).resolve(true);

Rendering resolved labels or do whatever you want for collided ones:

for (const box of resolver.boxes) {
  const { i, minX, maxX, minY, maxY } = box;
  if (i >= resolver.resolved) {
    // this one is still collided
    // ...
  } else {
    // this one has resolved successful
    // ...
  }
}

Definitions

See index.ts.

Dependencies

• RBush