d3fc-标签放出

一种D3布局,将标签放置在避免重叠的地方,其策略包括模拟的取暖,贪婪和去除重叠标签的策略.

现场演示请看 GitHub 页面网站。 。 。 .

主要 D3FC 软件包

安装

npm install @d3fc/d3fc-label-layout

API 参考

• 标签
• 战略
• 文本标签
• 战略

标签布局组件提供了基于其长方形边框排列子组件的机制. 它通常用于在地图或图表上渲染标签. 将布局策略传递给组件,以便安排子矩来避免相撞或去除相重叠.

import { layoutTextLabel, layoutGreedy,
    layoutLabel, layoutRemoveOverlaps } from 'd3fc-label-layout';
import { select } from 'd3-selection';

const labelPadding = 2;

// the component used to render each label
const textLabel = layoutTextLabel()
  .padding(labelPadding)
  .value(d => d.properties.name);

// a strategy that combines simulated annealing with removal
// of overlapping labels
const strategy = layoutRemoveOverlaps(layoutGreedy());

// create the layout that positions the labels
const labels = layoutLabel(strategy)
    .size((d, i, g) => {
        // measure the label and add the required padding
        const textSize = g[i].getElementsByTagName('text')[0].getBBox();
        return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
    })
    .position(d => projection(d.geometry.coordinates))
    .component(textLabel);

// render!
svg.datum(places.features)
     .call(labels);

以上片段取自一个完整的例子,说明如何 标签布局组件可用于在地图上排列标签。 。 。 .

为了与图表合并,标签布局组件将曝光 xScale 财务报告和审定财务报表 yScale 属性,作为 在此示例中显示。 。 。 .

标签

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.布局标签(单位:千美元)战略(中文(简体) )

构造新标签布局 战略。标签布局将创建一系列矩形边框,这些边框将传递给策略,通常会移动框以尽量减少重叠。 一旦布局完成,将使用数据连接来构建一个包含 g 框中每个项的元素,向布局提供的组件被“调用”-“调用”.

每个 g 元素有以下属性集:

• layout-width, (中文(简体) ), layout-height - 该标签的宽度和高度,由 size 属性.
• display - 准备 inherit 或者说 hidden,基于策略是否隐藏了此标签.
• anchor-x, (中文(简体) ), anchor-y - 相对于坐标的原始标签位置 g 键.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 布局标签。 。 。 .大小(单位:千美元)访问器(中文(简体) )

指定相关阵列中每个项目的大小。 这个 访问器 函数被精确引用一次,并应当返回大小为两个值的数组, [width, height]编辑 访问器 函数与当前基准(d)、当前索引(一)和当前组(节点)一起引用。 此函数在组件提供后被引用,且其值为 这个 上下文是包含 g 键。 因此,如果内容是动态的,可以测量组件的大小,例如,测量文本标签的大小.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 布局标签。 。 。 .职位(单位:千美元)访问器(中文(简体) )

指定关联数组中每个项目的位置。 这个 访问器 函数被精确引用一次,并带有当前基准(d),当前索引(一)和当前组(节点),并且应当将位置作为由两个值组成的数组返回, [x, y]。 。 。 .

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 布局标签。 。 。 .组件(单位:千美元)组件(中文(简体) )

指定用于制取每个标签的组件.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 布局标签。 。 。 .十. 规模(单位:千美元)缩放(中文(简体) ) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 布局标签。 。 。 .比例(单位:千美元)缩放(中文(简体) )

若为 缩放 ,设置比例并返回标签布局组件。 若为 缩放 未指定,返回当前比额表.

比额表适用于每个项目的位置,即:. [x, y] -> [xScale(x), yScale(y)],默认比例表为身份.

战略

标签组件使用策略来重新定位标签来避免相撞,或者也许隐藏重叠的标签.

战略提供一系列物体,说明每个标签的初始位置 position 财务报告和审定财务报表 size 属性 layout。 。 。 .

每个天体的结构如下:

{
    hidden: ...,
    x: ...,
    y: ...,
    width: ...,
    height: ...,
}

策略应返回显示每个标签位置的一系列对象.

贪婪

贪婪的策略是减少标签重叠的非常快的方法. 它按顺序添加了每个标签,选择标签与已经添加的矩形重叠最小的位置,并在容器内.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.布局风格(a) 与《公约》有关的其他事项

构建出一种贪婪的策略.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 布局风格。 。 。 .边框(单位:千美元)矩形(中文(简体) )

可选择指定一个边界区域,作为具有以下特性的矩形: x, (中文(简体) ), y, (中文(简体) ), width 财务报告和审定财务报表 height。策略将试图将标签限制在限度内.

模拟 Annaling

模拟的厌战策略贯穿了一组迭代,为每个迭代上的一个标签选择了不同的位置. 如果该位置能产生更好的结果,则保存到下一次重复。 否则,其保存概率将与其目前的迭代成反比。 这有助于打破当地的最佳条件,希望能够产生更好的产出。 由于算法的随机性,它会产生可变输出.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.排程(a) 与《公约》有关的其他事项

构造出一个反射策略.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 排程。 。 。 .边框(单位:千美元)矩形(中文(简体) )

可选择指定一个边界区域,作为具有以下特性的矩形: x, (中文(简体) ), y, (中文(简体) ), width 财务报告和审定财务报表 height。策略将试图将标签限制在限度内.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 排程。 。 。 .温度(单位:千美元)整数(中文(简体) )

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 排程。 。 。 .冷却(单位:千美元)整数(中文(简体) )

这个 温度 参数表示用于随机概率计算的初始“数”,以及 冷却 定义迭代之间温度的三角洲。 算法运行于 Math.ceil(temperature / cooling) 迭相会.

删除重叠

这种策略不会为减少重叠而重新定位标签,而是去除重叠的标签. 这是反复进行的,首先去掉重叠面积最大的标签.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.重新移动重叠(单位:千美元)战略(中文(简体) )

构造一个去除重叠策略, 并调整所提供的策略 战略 以便消除执行后重叠.

文本标签

这是一个简单的组件,使标签:

此组件使用 layout-width 财务报告和审定财务报表 layout-height 属性,用于设定自己的宽度和高度。 它也使用 anchor-x 财务报告和审定财务报表 anchor-y 属性以放置圆形锚地。 这些属性均由上述标签布局设置.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.外观标签(a) 与《公约》有关的其他事项

构造文本标签组件.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 文本标签。 。 。 .标签(单位:千美元)编号(中文(简体) )

指定文本周围的粘贴.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 外观标签。 。 。 .价值(单位:千美元)访问器(中文(简体) )

指定此标签的文本为访问器函数.