d3fc-数据连接

环绕 D3 数据的一圈,简化了 遇到的一些共同问题 我们的特殊使用模式,并便利 d3fc 装饰 模式。 这些标准不会普遍适用。 与往常一样,理解抽象和在许多情况下加入香草数据可能比较简单或表现更好.

这篇博客文章(有数据连接的构建组件介绍这一构成部分的理由.

主要 D3FC 软件包

安装

npm install @d3fc/d3fc-data-join

API 参考

数据join组件是一个围绕d3所选择的All/data数据-join的相对轻量级包装器,它允许对结果进行装饰. 这是通过在打开前将元素附加到输入选择中来实现的. 默认的淡出/淡出过渡也被隐含地添加,但可以被修改.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 页:1.数据([元素[, 类Name)

构造一个新的数据连接组件实例。 可选的 element 或一个 element (单位:千美元) className 可以指定,这在功能上相当于调用下文定义的方法.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 数据(单位:千美元)选择[, 数据)

使用一个 selection 包含父元素和 data 将合并.

import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';

const join = dataJoin('li', 'animal');

join(select('ul'), ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);

返回值是一个包含所有新和已存在的节点的选项。 为检索只包含新节点的选题,还暴露出另外两种方法(.enter())和被移除的节点(.exit()) (中文(简体) ).

import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';

const join = dataJoin('li', 'animal');

const update = join(select('ul'), ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);

update.enter()
  .attr('data-', d => d);

若为 d3-transition ,新的节点将应用已淡出过渡,而去除的节点将应用已淡出过渡。 过渡时间可以从集装箱选择中或通过明确设置加以控制 transition。 。 。 .

import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';
import { transition } from 'd3-transition';

const quickTransition = transition()
  .duration(300);

const join = dataJoin('li', 'animal');

const container = select('ul')
  .transition(quickTransition);

join(container, ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);

要禁用过渡, 请在传递到 -

import { dataJoin } from 'd3fc-data-join';
import { select } from 'd3-selection';
import { transition } from 'd3-transition';

const quickTransition = transition()
  .duration(300);

const join = dataJoin('li', 'animal');

const root = select('body')
  .transition(quickTransition);

const container = root.select('ul')
  .selection();

join(container, ['Aardvark', 'Beaver', 'Cat'])
  .text(d => d);

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

设置用于选择元素和创建用于插入的元素的元素名称。 默认为 SVG g 键。 见 className 用于描述所使用的选择器.

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 数据。 。 。 .类Name(单位:千美元)类Name(中文(简体) )

设置用于选择元素并应用到插入元素的类名。 默认为 null如果设置为 null,仅指 element 用作选择器。 如果非无,则选择器提供给 selectAll 这是 -

`${element}.${className}`

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 数据。 。 。 .键(单位:千美元)密钥(中文(简体) )

指定数据连接所用的关键函数。 基于索引的默认值 。 相当于指定 key 调用时的参数 selection.data()。 。 。 .

{\fn方正粗倩简体\fs12\an8\1cHFFFF00\b0} 数据。 。 。 .过渡(单位:千美元)过渡(中文(简体) )

指定未作为容器提供暗中过渡时使用的过渡。 默认为 null 用于禁用过渡.