nvd3散点图：子弹上的标签

2019年7月28日 196次阅读

我要求散点图的特定实现上的项目符号需要在它们旁边有标签,但是,众所周知,集合中的许多数据点都是相同的或彼此非常接近,所以如果我要设置相对于子弹的固定坐标上的标签,标签将堆叠在彼此之上并且不可读.

我想实现这一点,以便标签让位于彼此 – 四处移动,所以它们不会重叠 – 我认为这是一个普遍的想法,某种方法已经存在,但我不知道要搜索什么对于.这个概念有名字吗？

我想了解一个实现示例,但这不是最重要的事情.我相信我自己可以解决这个问题,但我宁愿不重新发明其他人已经做得更好的事情.

《nvd3散点图：子弹上的标签》

上图显示了彼此顶部和彼此靠近的子弹示例

最佳答案 我最终在
Simulated Annealing找到了灵感.

我的解决方案看起来像这样

/**
 * Implements an algorithm for placing labels on a chart in a way so that they
 * do not overlap as much.
 * The approach is inspired by Simulated Annealing
 * (https://en.wikipedia.org/wiki/Simulated_annealing)
 */
export class Placer {
    private knownPositions: Coordinate[];
    private START_RADIUS = 20;
    private RUNS = 15;
    private ORIGIN_WEIGHT = 2;

    constructor() {
        this.knownPositions = []
    }

    /**
     * Get a good spot to place the object.
     *
     * Given a start coordinate, this method tries to find the best place
     * that is close to that point but not too close to other known points.
     *
     * @param {Coordinate} coordinate
     * @returns {Coordinate}
     */
    getPlacement(coordinate: Coordinate) : Coordinate {
        let radius = this.START_RADIUS;
        let lastPosition = coordinate;
        let lastScore = 0;
        while (radius > 0) {
            const newPosition = this.getRandomPosition(coordinate, radius);
            const newScore = this.getScore(newPosition, coordinate);
            if (newScore > lastScore) {
                lastPosition = newPosition;
                lastScore = newScore;
            }
            radius -= this.START_RADIUS / this.RUNS;
        }
        this.knownPositions.push(lastPosition);
        return lastPosition;
    }

    /**
     * Return a random point on the radius around the position
     *
     * @param {Coordinate} position Center point
     * @param {number} radius Distance from `position` to find a point
     * @returns {Coordinate} A random point `radius` distance away from
     *     `position`
     */
    private getRandomPosition(position: Coordinate, radius:number) : Coordinate {
        const randomRotation = radians(Math.random() * 360);
        const xOffset = Math.cos(randomRotation) * radius;
        const yOffset = Math.sin(randomRotation) * radius;
        return {
            x: position.x + xOffset,
            y: position.y + yOffset,
        }
    }

    /**
     * Returns a number score of a position. The further away it is from any
     * other known point, the better the score (bigger number), however, it
     * suffers a subtraction in score the further away it gets from its origin
     * point.
     *
     * @param {Coordinate} position The position to score
     * @param {Coordinate} origin The initial position before looking for
     *     better ones
     * @returns {number} The representation of the score
     */
    private getScore(position: Coordinate, origin: Coordinate) : number {
        let closest: number = null;
        this.knownPositions.forEach((knownPosition) => {
            const distance = Math.abs(Math.sqrt(
                Math.pow(knownPosition.x - position.x, 2) +
                Math.pow(knownPosition.y - position.y, 2)
            ));
            if (closest === null || distance < closest) {
                closest = distance;
            }
        });
        const distancetoOrigin = Math.abs(Math.sqrt(
            Math.pow(origin.x - position.x, 2) +
            Math.pow(origin.y - position.y, 2)
        ));
        return closest - (distancetoOrigin / this.ORIGIN_WEIGHT);
    }
}

getScore方法还有改进的余地,但结果对我的情况来说已经足够了.

基本上,所有点都试图移动到给定半径中的随机位置,并查看该位置是否比原始位置“更好”.该算法在半径越来越小的情况下继续这样做,直到半径= 0.

该类记录所有已知点,因此当您尝试放置第二点时,评分可以解释第一点的存在.

点赞