d3fc 图
一个简单的笛卡尔图元件,可以使画布或SVG.
安装
npm install @d3fc/d3fc-chart
API 参考
API 概况
D3FC提供了一些组件/构件,使得使用SVG和帆布来构建标出D3图表更容易. 如果你只需要一个简单的笛卡尔图,这个包就是一个很好的起点,提供了一个简单的组件,它本身是利用其他D3FC包的组件来构建的(F)d3fc-要素, (中文(简体) ), d3fc-数据连接, (中文(简体) ), d3fc-轴, (中文(简体) ), d3fc系列, 等) (中文(简体) ).
鉴于以下情况:
<div id="sine" style="width: 500px; height: 250px"></div>
以下代码使笛卡尔图:
var data = d3.range(50).map((d) => ({
x: d / 4,
y: Math.sin(d / 4),
z: Math.cos(d / 4) * 0.7
}));
// use d3fc-extent to compute the domain for each axis
var xExtent = fc.extentLinear()
.accessors([d => d.x]);
var yExtent = fc.extentLinear()
.accessors([d => d.y, d => d.z])
.pad([0.1, 0.1])
// gridlines (from d3fc-annotation)
// n.b. the gridlines are rendered using SVG
var gridlines = fc.annotationSvgGridline();
// series (from d3fc-series)
// n.b. the series are rendered using canvas
var line = fc.seriesCanvasLine();
var area = fc.seriesCanvasArea()
.mainValue(d => d.z);
// combine into a single series
var multi = fc.seriesCanvasMulti()
.series([area, line]);
// the Cartesian component, which uses d3fc-element for layout
// of the standard features of a chart (axes, labels, plot area)
var chart = fc.chartCartesian(
d3.scaleLinear(),
d3.scaleLinear()
)
.xLabel('Value')
.yLabel('Sine / Cosine')
.chartLabel('Sine and Cosine')
.yDomain(yExtent(data))
.xDomain(xExtent(data))
.svgPlotArea(gridlines)
.canvasPlotArea(multi);
// render
d3.select('#sine')
.datum(data)
.call(chart);
现拟出:
图表采用一对平面图来构建. 缩放配置属性通过图表组件反弹(即再次曝光) x 财务报告和审定财务报表 y 前缀。 图表注意布局,如果包含元素的大小有变化,也会重新调整.
样式
组件会自动注入样式表,对元素应用必要的CSS. 这些风格可以用 CSS 来强化 -
d3fc-group.cartesian-chart > .x-label {
line-height: 5em;
color: red;
}
或者通过装饰
chart.decorate(selection => {
selection.enter()
.select('.x-label')
.style('line-height', '5em')
.style('color', 'red')
});
网格
内部,组件使用CSS网格布局来安排各种渲染表面和标签. 下图显示了网格结构及相关的行指标 -
1 2 3 4 5 6
1 /-------------|-----------|---------------|------------|--------------\
| | | top gutter | | |
2 |-------------|-----------|---------------|------------|--------------|
| | | top axis | | |
3 |-------------|-----------|---------------|------------|--------------|
| left gutter | left axis | plot area | right axis | right gutter |
4 |-------------|-----------|---------------|------------|--------------|
| | | bottom axis | | |
5 |-------------|-----------|---------------|------------|--------------|
| | | bottom gutter | | |
6 \-------------|-----------|---------------|------------|--------------/
其他元素可以投放到这个网格中,或者在使用装饰的现有元素的位置上,或者在现有元素之外. 以下是这一进程的一些典型例子.
注:这些例子都采用了现代CSS网格规格语法. 为了在IE的遗留版本中实现这些功能,你需要额外设置以下等同的前缀属性-
grid-column- 说吧-ms-grid-columngrid-row- 说吧-ms-grid-row
使用自定义轴组件
默认情况下,图表对轴元件使用d3fc-轴. 此示例显示如何指定用于 X 和 Y 轴的轴元件 .
var chart = fc.chartCartesian({
xScale: d3.scaleLinear(),
yScale: d3.scaleLinear(),
xAxis: {
bottom: myCustomAxis
},
yAxis: {
left: fc.axisLeft
}
})
.xLabel('Value')
.yLabel('Sine / Cosine')
.yOrient('left')
.yDomain(yExtent(data))
.xDomain(xExtent(data))
.canvasPlotArea(series);
添加第二个轴
默认情况下,图表允许左或右轴(参见 x 东方),但不是两者兼有. 这个例子显示了我们如何在另一个中使用装饰来添加——
// create a scale for the second axis
var zScale = d3.scaleLinear()
.domain([-1000, 1000]);
// create an axis for the scale
var zAxis = d3.axisRight(zScale);
chart.decorate(selection => {
// when the chart is added to the DOM
selection.enter()
// additionally add a d3fc-svg element for the axis
.append('d3fc-svg')
// move the element into the right-axis cell
.style('grid-column', 4)
.style('grid-row', 3)
// and set the axis width
.style('width', '3em')
// when there's a measure event (namespaced to avoid removing existing handlers)
.on('measure.z-axis', (event) => {
// set the range on the scale to the elements height
zScale.range([event.detail.height, 0]);
})
.on('draw.z-axis', (event,d) => {
// draw the axis into the svg within the d3fc-svg element
d3.select(event.currentTarget)
.select('svg')
.call(zAxis);
});
});
翻译Y轴
对图表结构的更激进的改变也可以使用装饰来进行——
chart.decorate(selection => {
// select the x-axis
selection.select('.x-axis')
// move it into the plot-area
.style('grid-row', 3)
// listen for the draw event (using a namespace to avoid removing any existing handlers)
.on('draw.move-axis', (event, d) => {
// select the x-axis
d3.select(event.currentTarget)
// apply a top margin to the axis to align it to 0 on the y-axis
.style('margin-top', `${yScale(0)}px`);
});
// optionally: add some padding to fill the gap left by the x-axis
selection.select('.x-label')
.style('padding-top', '1em');
});
// optionally: re-position the x-axis tick labels so they're readable
chart.xDecorate(selection => {
selection.select('text')
.attr('transform', 'translate(-7, 7)');
});
更改地块的 Z 顺序
默认情况下,地块区域的z顺序是后方为webgl,中后方为画布和上方为 svg. 这是将最常用的用于支持在前景中绘制的更具互动性的组件,在背景中绘制的互动性较少的组件.
在这种情况下互动是指直接响应用户输入,例如绘制说明或突出数据元素. 通常更容易使用svg(由于其用户发起的事件模式更丰富)或画布(由于它的API更简单)来开发这些组件.
如果这种 Z 顺序不合适,则可以使用装饰来修改顺序 -
chart.decorate(selection => {
// using the enter selection to ensure this only runs once, select each plot area node
const svgPlotArea = selection.enter()
.select('.svg-plot-area')
.node();
const canvasPlotArea = selection.enter()
.select('.canvas-plot-area')
.node();
const webglPlotArea = selection.enter()
.select('.webgl-plot-area')
.node();
// create a selection of the nodes in the required order
d3.selectAll([canvasPlotArea, svgPlotArea, webglPlotArea])
// order the nodes in the DOM by their selection order
.order();
});
笛卡尔
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.图表(单位:千美元)十. 规模, (中文(简体) ), 比例(中文(简体) )
以给定的天平构建新的笛卡尔图表.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.图表({ x 比例 : 十. 规模缩放 : 比例, x轴:轴线 Factory, yAxory: 轴线 Factory })
构造带有给定的天平和轴组件的新笛卡尔图表.
若为 x 轴 指定,它必须是具有需要的x轴工厂功能的对象(顶端 若为 x 东方="顶"或 下边 若为 x 东方="底层").
若为 y 轴 指定,它必须是具有所需y轴工厂功能的对象(左边 若为 y 东方="左边"或 对 若为 y 东方="对").
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .svg 绘图区(单位:千美元)组件(中文(简体) ) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .画布绘图区(单位:千美元)组件(中文(简体) ) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .网络gl绘图区(单位:千美元)组件(中文(简体) )
若为 组件 指定,设置要渲染到 SVG/canvas 上的组件,并返回笛卡尔图。 若为 组件 未指定,返回现有组件.
若为 画布绘图区 或者说 网络gl绘图区 重排时使用 上下文 自动应用于图表.
对于包含非常多的数据点的系列,渲染到画布可以缩短渲染时间并改进性能. 对于需要用户交互的组件,向SVG渲染可以简化其执行.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .使用DevicePixelRatio 软件(单位:千美元)价值(中文(简体) )
如果布尔 价值 ,设置 Canvas / WebGL 是否应根据显示设备的分辨率进行缩放,并返回笛卡尔图表。 若为 价值 未指定,返回当前值.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .图表标签(单位:千美元)标签(中文(简体) ) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .x 标签(单位:千美元)标签(中文(简体) ) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .y 标签(单位:千美元)标签(中文(简体) )
若为 标签 ,设置给定标签的文本,并返回笛卡尔图表。 若为 标签 未指定,返回标签文本.
这个 标签 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 .
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .轴高(单位:千美元)高度(中文(简体) )
若为 高度 指定,设置x轴的高度,并返回笛卡尔图表。 若为 高度 未指定,返回x轴高度,否则无效。 值应为带有单位的字符串(如"2em").
这个 高度 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 .
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .轴线(单位:千美元)宽度(中文(简体) )
若为 宽度 指定,设置 Y 轴的宽度,并返回笛卡尔图表。 若为 宽度 未指定,返回 Y 轴宽度,如果未设定,则无效。 值应为带有单位的字符串(如"2em").
这个 宽度 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 .
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .x 东方(单位:千美元)东方(中文(简体) ) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .y 东方(单位:千美元)东方(中文(简体) )
若为 东方 中指定了方向,设置方向,并返回笛卡尔图。 若为 东方 未指定方向,返回方向。 有效数值 y 东方 为: 左边, (中文(简体) ), 对 或者说 无,用于 x 东方 他们是 顶端, (中文(简体) ), 下边 或者说 无。 。 。 .
如果方向为: 无 为轴、轴、轴标签及其容器指定.
这个 东方 值可以是字符串,也可以是返回字符串的函数。 如果它是一个函数,它将会被和“绑定”到图表的数据一起引用. 如果您正在使用一个数据加入来渲染多张图表, 这会有所帮助 .
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .装饰(单位:千美元)装饰Func(中文(简体) )
若为 装饰Func ,将装饰器功能设置到指定的位置,并返回笛卡尔图表。 若为 装饰Func 未指定,返回当前装饰器函数.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .x 域名(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .区域(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .不错(...) .
笛卡尔图表显示比例尺属性,其中之一 x 或者说 y 前缀.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .x 键(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .x 文本格式(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .十进制(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .yTicks 语句(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .yTick 格式(...) {\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 笛卡尔。 。 。 .调和(...) .
笛卡尔图显示 d3fc-轴 键, (中文(简体) ), 勾选大小, (中文(简体) ), 勾选值, (中文(简体) ), 勾选表, (中文(简体) ), 勾选参数, (中文(简体) ), 滴答内置, (中文(简体) ), 勾选大小输出, (中文(简体) ), 勾选, (中文(简体) ), 勾选中心标签 财务报告和审定财务报表 装饰 属性,其中之一 x 或者说 y 前缀.