花粉轴亮点
本模块允许用户添加亮点来进行繁荣-图放出(或繁荣-轴)轴.
开始
1. 安装
npm install --save @flourish/axes-highlights
2. 添加设置和状态
const state = {
axes_highlights: {} // Add any properties to this object to override the default settings
}
# template.yml
- property: axes_highlights
import: "@flourish/axes-highlights"
3. 初始化轴突
import initAxesHighlights from "@flourish/axes-highlights";
var axes_highlights = initAxesHighlights(state.axes_highlights);
4. 更新轴亮点
在模板的更新功能(例如. updateGraphic)通常将下列方法称为:
let container = select(...);
axes_highlights
.appendTo(container)
.chartLayout(chart_layout)
.update();
您需要使用的最低方法为 appendTo, (中文(简体) ), chartLayout 财务报告和审定财务报表 update。关于完整的配置,请参见“方法”.
container 是代表要显示的元素的 D3 选择。 您可能需要导入 d3-transition 模块 container 选择,这样可以进行转换。 (没有这个,轴线亮点可能根本不显示. )
这一基本实施将轴线突出部分附加在容器上(container) (中文(简体) ). 如果您想要在同一个母容器内附加多轴突出显示容器( 例如多个侧面), 您可以使用 offset() 设置轴突出显示容器的方法(见执行实例) 这里) (中文(简体) ). Axes 突起应该被附加在每面,所以例如LBP中,并被分散在每面组的facet.js文件中.
方法
轴 高光. animation 定义( 数字)
你想让动画拍多久? 等待一个数字.
轴 高光度. appendPattersTo( 选择)
轴突可以使用 SVG 模式来渲染. 在容器中通过,您希望图案被附加。 需要D3选择 如果不使用此选项, 它将默认为附件 To 容器 。 由于每面都叫出轴突起,一个具有多面的模板将图案附加到面板容器上会效率低下,因为这会导致图案被定义的次数超过必要的时间. 因此,如果您使用一个具有多个方面的模板,您应该呼叫 appendPatternsTo 仅仅在绘图函数中传递一次,传递一个包罗所有方(如 svg)的容器,这样所有轴突亮都使用相同的图案. 如果模板不包含多个方面, 您不需要使用这种方法, 因为默认效果应该很好 .
轴 高亮度. appendto( 选中)
附加到的父元素 。 我们倾向于使用 fl-data-foreground 组合为父(如果存在)。 譬如说. .appendTo(select(".fl-data-foreground"))。需要一个 d3 选择.
轴 高光.chartLayout(chart layout)
指定一个图表布局(或轴)实例来附加突现。 用于平面,边距,地块分化等(应为每平面1个).
期望它拥有以下属性,通常是其中的一部分: @flourish/chart-layout (英语) (或@flourish/axes)模块:
- xDatetimeParse
- yDatetimeParse
- margins
- plot_height
- plot_width
- xData
- yData
- xScale
- yScale
轴 高光. 面部Name (字符串)
Facet 名称,用于知道亮点是否应该适用于facet. 期待一个字符串.
轴 高光. 数字Parser( fn)
用来解析数字,例如:. localization.getParser()。用于分析一个轴是类型编号时的数字。 (如果轴是类型日期,我们使用图表布局(或轴)日期解析器和字符串不解析). 期待一个函数.
轴 高光.offset(对象)
向轴上突出显示容器相抵后增加。 期望含有 x 财务报告和审定财务报表 y 财产,例如:. {x: 25, y: 10}。 。 。 .
轴 高光. update( )
更新亮点!
轴 高光. x 残废( 布尔)
如果您想要禁用 x 突起( 例如当图表没有 x 轴时在 LBP) 。 期待一个布尔.
轴 高光. xExtendByStep( 布尔)
如果您想要扩展 x 区域亮点( 例如在 LBP 中, 区域会超出精确的 x 值, 因为它覆盖一列网格) 。 期待一个布尔.
轴 高光. y
如果您想要将 y 突出显示禁用( 例如当图表没有 y 轴时在 LBP) 。 期待一个布尔.
轴 高光.yExtendByStep(布尔)
如果您想要扩展 y 区域亮点( 例如, 在 LBP 中, 区域会超出精确的 y 值, 因为它覆盖一列网格) 。 期待一个布尔.