d3fc-要素
自定义 HTML 元素,可以更容易地使用 CSS 创建响应性的 D3可视化,方便地与其他UI 框架(如 React,Angular)相融合.
安装
npm install @d3fc/d3fc-element
圆柱体
此软件包需要自定义元素( v1 即 . customElements.define 没有扩展内置( N) 和自定义Event 支持 。 如果您正在瞄准一个不支持这些 API 的浏览器, 可以使用以下的多填充 --
API 参考
<d3fc-svg> <d3fc-canvas> (中文(简体) )
这些元素提供了一个巢穴 svg 或者说 canvas 元素作为D3可视化的渲染表面。 使用 CSS 来大小元素,其像素尺寸会被自动传播到被嵌入元素.
渲染是一个三相过程 自动与动画框架对齐, 计量, (中文(简体) ), 调整大小 (如有需要)和 绘图编辑 调整大小 财务报告和审定财务报表 绘图 相间发出类似命名的事件,以便调用渲染代码.
分裂是允许在任何渲染发生之前,在文档的所有表面进行测量逻辑。 通过防止 DOM 读取(在 计量)与 DOM 写作(应在 绘图) (中文(简体) ).
<d3fc-svg id="x-axis" style="width: 10vw; height: 6vw"></d3fc-svg>
const xScale = d3.scaleLinear()
.domain([0, 10]);
const xAxis = d3.axisBottom(xScale);
const xAxisContainer = d3.select('#x-axis')
.on('measure', (event) => {
const { width } = event.detail;
xScale.range([0, width]);
})
.on('draw', (event) => {
d3.select(event.currentTarget)
.select('svg')
.call(xAxis);
});
// Now that the event handlers are added, request a redraw
xAxisContainer.node()
.requestRedraw();
// Some time later...
setTimeout(() => {
// ...a change requiring a redraw occurs...
xScale.domain([0, 5]);
// ...so we request a redraw of the element.
xAxisContainer.node()
.requestRedraw();
}, 1000);
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 表面。 。 。 .请求红色raw(a) 与《公约》有关的其他事项
重新绘制到下一个动画框上, 只有当还没有等待。 如果一个电话已经等待,这个电话就会被忽略.
应当指出 requestRedraw 是一个同步的。 它不直接引用绘图事件, 因此事件处理器中出现的任何错误都无法被捕获 .
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 表面。 。 。 .使用DevicePixelRatio 软件(a) 与《公约》有关的其他事项
作为财产可供使用 useDevicePixelRatio 属性 use-device-pixel-ratio。控制表面维度是否乘以 devicePixelDepth 如果有的话.
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 画布。 。 。 .设置WebGlViewport(a) 与《公约》有关的其他事项
说明 d3fc-svg 不支持此属性.
作为财产可供使用 setWebglViewport 属性 set-webgl-viewport。控制表层维度是否额外设置在 WebGL 上下文 视图。 。 。 .
<d3fc-组>
没有视觉表现的元素,用于组合相干渲染表面(<d3fc-svg> (英语)编号 :<d3fc-canvas> (英语)) (中文(简体) ). 它的核心宗旨是多播 组. 请求雷德劳 呼叫后人表面并提供汇总绘图事件。 此外,它还提供助手,允许 自动重排 对窗口的后人表面 resize 事件.
<d3fc-group id="chart" auto-resize style="display: flex; height: 40vw; width: 60vw; flex-direction: column">
<h1 style="text-align: center">
A Cartesian Chart
</h1>
<div style="flex: 1; display: flex; flex-direction: row">
<d3fc-svg id="plot-area" style="flex: 1"></d3fc-svg>
<d3fc-svg id="y-axis" style="width: 5em"></d3fc-svg>
</div>
<div style="height: 3em; display: flex; flex-direction: row">
<d3fc-svg id="x-axis" style="flex: 1; margin-right: 5em"></d3fc-svg>
</div>
</d3fc-group>
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 组。 。 。 .自动回复 =: 自动回复
作为财产可供使用 autoResize 属性 auto-resize如果 true,倾听 window resize 自动引用 组. 请求雷德劳。 。 。 .
{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 组。 。 。 .请求红色raw(a) 与《公约》有关的其他事项
相当于援引 表面. 请求雷德劳 所有后人群体或表面元素。 此类和后人群体或表面所引发事件的顺序保证按文件顺序排列(即使在这一呼吁之前或之后就其中之一重新绘制请求).
活动
以下自定义 DOM 事件由元素释放出 --
measure- 表示该元素已被测量。 一般情况下measure事件用于设置 范围 或应用变换.draw- 表示元素需要绘图。 一般情况下draw事件用于渲染组件或执行任何有声数据joins.
以下属性可用于 detail 属性 <d3fc-组>) - (英语)
width- 以像素表示的表面宽度.height- 以像素计的地表高度.resized- 显示元素是否自上次平分以来已调整大小的旗帜.
注:立即援引是安全的 表面. 请求雷德劳 如果您想要创建动画, 则来自事件处理器。 重新绘制将被安排在之后的动画框架上.