d3fc-轴
D3轴的倒置替换,支持D3FC装饰图案,改进了平面平面的布局选项,并自动标签旋转/重新定位.
安装
npm install @d3fc/d3fc-axis
API 参考
API 概况
这是替补 d3轴,因此,请参见该项目的详细文件 - 所有d3轴属性和特征都得到本部分的支持。 新增了几处地产,如下文所记载.
选中和标签布局选项
居中标签
当渲染一个与线性尺度相联的轴时,轴的默认行为是使每个勾选下方的标签被渲染出. 这往往最有意义,标签上注明了比例尺上的具体实例.
然而,在某些情况下,标签可能指一系列数据。 例如,在时间尺度上,"星期一"指的是一个时间范围,而不是一个时间范围的例子. 因此,使这个标签在勾痕之间变得更有意义.
以 D3FC 为轴, 设置 tickCenterLabel 改为 true 将在勾选标记之间使标签折成相去相去甚远 :
const linear = d3.scaleTime()
.domain([new Date('2019-03-02'), new Date('2019-03-07')])
.range([0, 400]);
const axis = fc.axisBottom(linear)
.tickArguments([5])
.tickCenterLabel(true);
带宽
带状平面常被用来渲染带有绝对维度的图表. 使用 D3 轴,勾和标签在每个栏/列的中心点提供. 然而,使每个行/ 分类之间的边界上的勾选更有意义.
D3FC正弦轴是一种倒置的替换,它使条/列中心点的标签和边框的勾选:
const vegetableScale = d3.scaleBand()
.domain(['Carrots', 'Bananas', 'Sausages', 'Pickles'])
.paddingInner(0.1)
.paddingOuter(0.1)
.range([0, width]);
const barSeries = fc.autoBandwidth(fc.seriesSvgBar())
.align('left')
.crossValue(x => x.veg)
.mainValue(x => x.qty)
.xScale(vegetableScale)
.yScale(qtyScale);
// this is the D3FC ordinal axis
const axis = fc.axisOrdinalBottom(scale);
// render the above components to SVG ...
var svg = d3.select('body').append('svg')
...
标签旋转/ 相抵
与 D3 轴相通,如果勾选标记太相近,它们的相通标签可能相通. 使用 D3FC 可以对轴子应用适配器来自动移动/旋转标签来避免相撞.
以下是轴标签重叠的简单例子:
const foodScale = d3.scaleBand()
.domain(['Carrots', 'Bananas', 'Sausages', 'Pickles', 'Aubergines', 'Artichokes', 'Spinach', 'Cucumber'])
.range([10, 290]);
const axis = fc.axisOrdinalBottom(foodScale);
d3.select('svg')
.call(axis);
通过应用一个适配器可以避免重叠,例如您可以应用 axisLabelRotate 适配器如下:
const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(foodScale));
每次使轴使这个适配器测量标签并决定是否需要旋转来避免相撞. 以此为例,轴使:
装饰图案
执行装饰图案的组件暴露于 decorate 属性,通过该属性,数据结合用于构建组件的 DOM 选择。 这使得组件的用户可以在输入,更新和退出选择中添加额外的逻辑.
详情请查阅 装饰图案文档。 。 。 .
在下面的例子中,绑定在每个勾选上的值用于给值大于或等于100的颜色:
const scale = d3.scaleLinear()
.domain([0, 140])
.range([0, 400])
.nice();
const axis = fc.axisBottom(scale)
.decorate((s) =>
s.enter()
.select('text')
.style('fill', function(d) {
return d >= 100 ? 'red' : 'black';
});
);
轴
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴控(a) 与《公约》有关的其他事项 {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴Top(a) 与《公约》有关的其他事项 {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴向左(a) 与《公约》有关的其他事项 {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴向右(a) 与《公约》有关的其他事项
D3 轴的倒置替换,见 API 参考的 D3 文件。 。 。 .
常态轴
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.坐标轴(a) 与《公约》有关的其他事项 {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴正弦Top(a) 与《公约》有关的其他事项 {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴向正弦左(a) 与《公约》有关的其他事项 {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴正弦右(a) 与《公约》有关的其他事项
D3 轴的倒置替换,见 API 参考的 D3 文件。 。 。 .
轴标签偏移
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.坐标(单位:千美元)轴(中文(简体) )
为避免相撞而抵消轴标签的适配器.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 轴。 。 。 .标签对象深度(单位:千美元)页:1(中文(简体) )
若为 页:1 ,设置相向深度并返回此序列。 若为 页:1 未指定,返回当前偏移深度.
若为 页:1 设置为 auto,适配器将确定需要由标签所抵消的需要的抵消深度(即级别数)来避免相撞. 若为 页:1 设置为数字,它将被给定的深度抵消标签.
轴标签旋转
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.轴标签旋转(单位:千美元)轴(中文(简体) )
一个为避免相撞而旋转轴标签的适配器.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 轴。 。 。 .标签旋转(单位:千美元)学位(中文(简体) )
若为 学位 中指定旋转角。 若为 学位 未指定,返回当前旋转角度.
若为 学位 设置为 auto,适配器将确定标签是否重叠,然后旋转来避免相撞. 视现有空间而定,角会从相当浅的,一直到90度不等. 若为 学位 设置为数字,它将按给定角度旋转标签.