@acimini/cm-d3-graphs 中文文档教程

Question

CmD3Graphs

这个库是一个 Angular 库，它在 d3 和 dagrejs 库的帮助下构建最常见的图形。\ 有了这个库，我们有：

• histogram
• line chart
• pie
• donut
• range slider
• tree chart
• flow chart
• bubble chart

这是基于：

• Angular 9
• D3 6.3.1
• Dagre 0.8.5

Index

1. Install
2. How to use
3. Graph types
   • Histogram
   • Configurations
   • Data
   • Component
   • Example
   • Pie
   • Configurations
   • Data
   • Component
   • Example
   • Donut
   • Configurations
   • Data
   • Component
   • Example
   • Line
   • Configurations
   • Data
   • Component
   • Example
   • Range slider
   • Configurations
   • Data
   • Component
   • Example
   • Tree
   • Configurations
   • Data
   • Component
   • Example
   • Flow chart
   • Configurations
   • Data
   • Component
   • Example
   • Bubble chart
   • Configurations
   • Data
   • Component
   • Example
4. Authors
5. License

Install

npm install d3 --save

npm install dagre --save

npm install @acimini/cm-d3-graphs --save

在您的应用程序中导入

import { CmD3GraphsModule } from '@acimini/cm-d3-graphs';

@NgModule({
  imports: [ CmD3GraphsModule ],
  ...
})

How to use

First define the configuration for the graph

import {GraphTypeConfigurationInterface} from '@acimini/cm-d3-graphs';

const graphConf: GraphTypeConfigurationInterface = {
  ...
}

每个图表都有自己的配置。 请参阅以下部分以检查您选择的图形的配置是什么。

Define the data for the graph

import {GraphTypeDataInterface} from '@acimini/cm-d3-graphs';

const graphData: GraphTypeDataInterface = [
  ...
];

对于图形数据，有一个适用于大多数图形类型的基本接口，还有一些特定于那些具有更复杂结构的图形。 请参阅以下部分以检查您选择的图表的数据格式是什么。

Use the graph component in the html

<cm-graph-type [graphConfigs]="graphConf" [graphData]="graphData"></cm-graph-type>

该组件可能需要比上面显示的更多的输入。 请参阅以下部分以检查为您选择的图表使用组件的正确方法是什么。

重要：组件必须包含在设置了width 和height 的元素中.

Graph types

下面显示了可用图表类型的列表。\ 每个图表部分分为四个部分：

• Configurations: in this section, it is described what configurations are available for the graph and how use them.
• Data: in this section, it is described how data must be structured to work with the graph type choose.
• Component: in this section, it is show how to use the graph component in the html.
• Example: in this section, it is show an example of the usage of the graph choose.

Histogram

Configurations

要正确配置图表，可以使用 HistogramGraphConfigurationInterface

import {HistogramGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const histogramConf: HistogramGraphConfigurationInterface = {
  ...
}

在列表下方，其中包含直方图图表的所有可用配置。\ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的，并且必须是直方图。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

定义图表中显示的最大数据数的数字。\ 如果数据长度大于该属性的值，将显示一个滚动条。

events

一个对象，用于设置图表上启用的事件。

{
    clickOnElement: boolean
}

• clickOnElement: if true, the event clickOnBar will be emitted each time user clicks on a bar. The event contains the data of the bar clicked.

如果未提供，将使用默认值。

{
  clickOnElement: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

tooltipFormat

一个函数，用于定义当鼠标移到栏上时出现的工具提示的格式。

(label: string, value: number) => string

如果未提供，将使用默认值。

(label, value) => label + ': ' + value

orientation

它可以是水平或垂直并定义图形的方向。\ 如果未提供，则默认值为vertical。

grid

定义网格外观的对象。

{
    axisX: boolean,
    axisY: boolean,
    color: string
}

• axisX: if true, enables the grid along the horizontal direction.
• axisY: if true, enables the grid along the vertical direction.
• color: defines the color of the grid.

如果未提供，将使用默认值。

{
    axisX: true,
    axisY: true,
    color: '#ccc'
}

axis

定义轴外观的对象。

{
    showAxisX: boolean,
    showAxisY: boolean,
    invertAxisX: boolean,
    invertAxisY: boolean,
    labelXOrientation: 'horizontal' | 'vertical' | 'oblique',
    labelYOrientation: 'horizontal' | 'vertical' | 'oblique',
    tickFormatX: (d: string) => string,
    tickFormatY: (d: string) => string,
    lineColor: string,
    textColor: string
}

• showAxisX: if true, enables the axis along the horizontal direction.
• showAxisY: if true, enables the axis along the vertical direction.
• invertAxisX: if true, inverts the axis along the horizontal direction.
• invertAxisY: if true, inverts the axis along the vertical direction.
• labelXOrientation: defines the orientation of the tick label for the horizontal axis.
• labelYOrientation: defines the orientation of the tick label for the vertical axis.
• tickFormatX: a function that returns the tick label formatted for the horizontal axis.
• tickFormatY: a function that returns the tick label formatted for the vertical axis.
• lineColor: defines the color of the axes.
• textColor: defines the tick label color.

如果未提供，将使用默认值。

{
    showAxisX: true,
    showAxisY: true,
    invertAxisX: false,
    invertAxisY: false,
    labelXOrientation: 'horizontal',
    labelYOrientation: 'horizontal',
    lineColor: 'black',
    textColor: 'black'
}

groups

使用直方图，我们可以在同一张图中表示一组或多组数据。\ 组的配置是一个对象数组，它定义了每个组的配置。

{
    color: string,
    label: string
}

• color: defines the color of the bars that represent the set.
• label: defines the label of the set (it is useful in conjunction with the legend - see section below).

如果未提供，系统会根据提供的数据自动计算组数，并为每个组创建默认配置。

{
    color: '#1980B6',
    label: 'Group-' + index of the set
}

groupedType

与前面的配置一起，可以定义分组的类型。 它可以是内联或堆叠。\ 如果未提供，则默认值为 inline。

legend

定义图例可见性和位置的对象。

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

• enabled: defines if the legend is enabled.
• position: defines the position of the legend.

如果未提供，将使用默认值。

{
    enabled: false, 
    position: 'right'
}

Data

直方图的数据具有特定格式，由 HistogramGraphDataInterface

import {HistogramGraphDataInterface} from '@acimini/cm-d3-graphs';

const histogramData: HistogramGraphDataInterface[] = [
    {...},
    ...
]

在列表下方定义，其中包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。

id

定义数据 ID 的字符串。\ 如果未提供，将使用自动计算 值。

label

定义数据标签的字符串。 它是必需的。

values

为每个数据定义组值的数字数组。 它是必需的。

extraData

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击一个栏时，它会返回关键字 extraData 下的数据。

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-histogram-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-histogram-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

import {HistogramGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const histogramConfs: HistogramGraphConfigurationInterface = {
  id: 'histogram_chart',
  type: 'histogram',
  groups: [
    {color: '#1980B6'},
    {color: '#ec1f1f'},
    {color: '#09b116'}
  ],
  axis: {
    invertAxisY: false,
    invertAxisX: false
  },
  orientation: 'vertical',
  maxDisplayedNumber: 10,
  legend: {
    position: 'right',
    enabled: true
  }
}

Data

import {HistogramGraphDataInterface} from '@acimini/cm-d3-graphs';

const histogramData: HistogramGraphDataInterface[] = [
  {values: [-12, 34, -56], label: 'Label1'},
  {values: [23, -5, 67], label: 'Label2'},
  {values: [1, 7, 4], label: 'Label3'},
  {values: [67, 31, -12], label: 'Label4'},
  {values: [-43, -43, 9], label: 'Label5'},
  {values: [2, -89, -63], label: 'Label6'},
  {values: [98, 11, 45], label: 'Label7'},
  {values: [-53, 26, -12], label: 'Label8'},
  {values: [-29, 26, 35], label: 'Label9'},
  {values: [31, 1, -5], label: 'Label10'},
  {values: [81, -12, -34], label: 'Label11'},
  {values: [60, 51, -41], label: 'Label12'},
  {values: [-4, -17, 31], label: 'Label13'},
  {values: [35, 67, 18], label: 'Label14'},
  {values: [19, 56, 25], label: 'Label15'},
  {values: [-93, 5, -89], label: 'Label16'},
  {values: [51, 34, -57], label: 'Label17'},
  {values: [56, 76, 12], label: 'Label18'},
  {values: [-48, 87, 90], label: 'Label19'},
  {values: [11, -32, -12], label: 'Label20'}
]

Pie

Configurations

要正确配置图形，可以使用PieGraphConfigurationInterface

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const pieConf: PieGraphConfigurationInterface = {
  ...
}

，列表下方包含饼图的所有可用配置。\ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的并且必须是馅饼。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

定义图表中显示的最大数据数的数字。\ 如果数据长度大于该属性的值，切片将按冠分布。

events

一个对象，用于设置图表上启用的事件。

{
    clickOnElement: boolean
}

• clickOnElement: if true, the event clickOnSlice will be emitted each time user clicks on a slice. The event contains the data of the slice clicked.

如果未提供，将使用默认值。

{
  clickOnElement: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

tooltipFormat

一个函数，用于定义当鼠标移到切片上时出现的工具提示的格式。

(label: string, value: number) => string

如果未提供，将使用默认值。

(label, value) => label + ': ' + value

slices

定义切片外观的对象。

{
    colors: string[],
    textColor: string
}

• colors: an array that defines the color of each slice.
• textColor: defines the color of the slice label.

如果未提供，将使用默认值。

{
    colors: ['#e61400', '#ff0f64', '#0555fa', '#008c5a', '#ff5a0f',
      '#ff4687', '#41b9e6', '#55be5a', '#c6c6c6', '#000000'],
    textColor: 'white'
}

如果定义的颜色的维度小于数据维度，它们将被循环使用。\ 例如，如果我们有 11 个数据和 10 种颜色，则第 11 个数据将使用第一个颜色，依此类推。

legend

定义图例可见性和位置的对象。

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

• enabled: defines if the legend is enabled.
• position: defines the position of the legend.

如果未提供，将使用默认值。

{
    enabled: false, 
    position: 'right'
}

Data

饼图的数据具有特定格式，由 PieGraphDataInterface

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const pieData: PieGraphDataInterface[] = [
    {...},
    ...
]

在列表下方定义，其中包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。

id

定义数据 ID 的字符串。\ 如果未提供，将使用自动计算 值。

label

定义数据标签的字符串。 它是必需的。

value

定义数据值的数字。 它是必需的。

extraData

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击切片时，它会返回关键字 extraData 下的数据。

slice

定义单个切片外观的对象。

{
  color: string;
}

• color: defines the color of the slice and overwrite the colors' property defined in configurations.

如果未提供，将使用配置中的颜色。

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-pie-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-pie-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const pieConfs: PieGraphConfigurationInterface = {
  id: 'pie_chart',
  type: 'pie',
  maxDisplayedNumber: 7,
  legend: {
    position: 'top',
    enabled: true
  }
};

Data

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const pieData: PieGraphDataInterface[] = [
  {label: 'USA', value: 130},
  {label: 'UK', value: 20},
  {label: 'Canada', value: 30},
  {label: 'Mexico', value: 15},
  {label: 'Italy', value: 5},
  {label: 'France', value: 6},
  {label: 'England', value: 4},
  {label: 'Japan', value: 10},
  {label: 'Germany', value: 7},
  {label: 'Poland', value: 12},
  {label: 'Ukraine', value: 8},
  {label: 'Russia', value: 9},
  {label: 'China', value: 10}
]

Donut

Configurations

要正确配置图形，可以使用 PieGraphConfigurationInterface

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const donutConf: PieGraphConfigurationInterface = {
  ...
}

列表下方的圆环图所有可用配置。\ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的，并且必须是甜甜圈。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

定义图表中显示的最大数据数的数字。\ 如果数据长度大于该属性的值，切片将按冠分布。

events

一个对象，用于设置图表上启用的事件。

{
    clickOnElement: boolean
}

• clickOnElement: if true, the event clickOnSlice will be emitted each time user clicks on a slice. The event contains the data of the slice clicked.

如果未提供，将使用默认值。

{
  clickOnElement: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

tooltipFormat

一个函数，用于定义当鼠标移到切片上时出现的工具提示的格式。

(label: string, value: number) => string

如果未提供，将使用默认值。

(label, value) => label + ': ' + value

slices

定义切片外观的对象。

{
    colors: string[],
    textColor: string
}

• colors: an array that defines the color of each slice.
• textColor: defines the color of the slice label.

如果未提供，将使用默认值。

{
    colors: ['#e61400', '#ff0f64', '#0555fa', '#008c5a', '#ff5a0f',
      '#ff4687', '#41b9e6', '#55be5a', '#c6c6c6', '#000000'],
    textColor: 'white'
}

如果定义的颜色的维度小于数据维度，它们将被循环使用。\ 例如，如果我们有 11 个数据和 10 种颜色，则第 11 个数据将使用第一个颜色，依此类推。

legend

定义图例可见性和位置的对象。

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

• enabled: defines if the legend is enabled.
• position: defines the position of the legend.

如果未提供，将使用默认值。

{
    enabled: false, 
    position: 'right'
}

Data

甜甜圈的数据有一个特定的格式，由 PieGraphDataInterface 定义，

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const donutData: PieGraphDataInterface[] = [
    {...},
    ...
]

下面是一个列表，其中包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。

id

定义数据 ID 的字符串。\ 如果未提供，将使用自动计算 值。

label

定义数据标签的字符串。 它是必需的。

value

定义数据值的数字。 它是必需的。

extraData

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击切片时，它会返回关键字 extraData 下的数据。

slice

定义单个切片外观的对象。

{
  color: string;
}

• color: defines the color of the slice and overwrite the colors' property defined in configurations.

如果未提供，将使用配置中的颜色。

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-pie-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-pie-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const donutConfs: PieGraphConfigurationInterface = {
  id: 'donut_chart',
  type: 'donut',
  maxDisplayedNumber: 7
};

Data

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const donutData: PieGraphDataInterface[] = [
  {label: 'USA', value: 60},
  {label: 'UK', value: 20},
  {label: 'Canada', value: 30},
  {label: 'Mexico', value: 15},
  {label: 'Italy', value: 5},
  {label: 'France', value: 6},
  {label: 'England', value: 4},
  {label: 'Japan', value: 10},
  {label: 'Germany', value: 7},
  {label: 'Poland', value: 12},
  {label: 'Ukraine', value: 8},
  {label: 'Russia', value: 9},
  {label: 'China', value: 10}
]

Line

Configurations

要正确配置图形，可以使用LineGraphConfigurationInterface

import {LineGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const lineConf: LineGraphConfigurationInterface = {
  ...
}

，在列表下方包含折线图的所有可用配置。\ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的，并且必须是行。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

定义图表中显示的最大数据数的数字。\ 如果数据长度大于该属性的值，将显示一个滚动条。

events

一个对象，用于设置图表上启用的事件。

{
    clickOnElement: boolean
}

• clickOnElement: if true, the event clickOnDot will be emitted each time user clicks on a dot on the line. The event contains the data of the dot clicked.

如果未提供，将使用默认值。

{
  clickOnElement: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

tooltipFormat

一个函数，它定义了当鼠标移到一个点上时出现的工具提示的格式。

(label: string, value: number) => string

如果未提供，将使用默认值。

(label, value) => label + ': ' + value

orientation

它可以是水平或垂直并定义图形的方向。\ 如果未提供，则默认值为vertical。

grid

定义网格外观的对象。

{
    axisX: boolean,
    axisY: boolean,
    color: string
}

• axisX: if true, enables the grid along the horizontal direction.
• axisY: if true, enables the grid along the vertical direction.
• color: defines the color of the grid.

如果未提供，将使用默认值。

{
    axisX: true,
    axisY: true,
    color: '#ccc'
}

axis

定义轴外观的对象。

{
    showAxisX: boolean,
    showAxisY: boolean,
    invertAxisX: boolean,
    invertAxisY: boolean,
    labelXOrientation: 'horizontal' | 'vertical' | 'oblique',
    labelYOrientation: 'horizontal' | 'vertical' | 'oblique',
    tickFormatX: (d: string) => string,
    tickFormatY: (d: string) => string,
    lineColor: string,
    textColor: string
}

• showAxisX: if true, enables the axis along the horizontal direction.
• showAxisY: if true, enables the axis along the vertical direction.
• invertAxisX: if true, inverts the axis along the horizontal direction.
• invertAxisY: if true, inverts the axis along the vertical direction.
• labelXOrientation: defines the orientation of the tick label for the horizontal axis.
• labelYOrientation: defines the orientation of the tick label for the vertical axis.
• tickFormatX: a function that returns the tick label formatted for the horizontal axis.
• tickFormatY: a function that returns the tick label formatted for the vertical axis.
• lineColor: defines the color of the axes.
• textColor: defines the tick label color.

如果未提供，将使用默认值。

{
    showAxisX: true,
    showAxisY: true,
    invertAxisX: false,
    invertAxisY: false,
    labelXOrientation: 'horizontal',
    labelYOrientation: 'horizontal',
    lineColor: 'black',
    textColor: 'black'
}

groups

使用这条线，我们可以在同一张图中表示一组或多组数据。\ 组的配置是一个对象数组，它定义了每个组的配置。

{
    color: string,
    label: string
}

• color: defines the color of the line that represent the set.
• label: defines the label of the set (it is useful in conjunction with the legend - see section below).

如果未提供，系统会根据提供的数据自动计算组数，并为每个组创建默认配置。

{
    color: '#1980B6',
    label: 'Group-' + index of the set
}

hasArea

启用线下区域的布尔值。

legend

定义图例可见性和位置的对象。

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

• enabled: defines if the legend is enabled.
• position: defines the position of the legend.

如果未提供，将使用默认值。

{
    enabled: false, 
    position: 'right'
}

Data

线条的数据具有特定格式，由 LineGraphDataInterface 定义，

import {LineGraphDataInterface} from '@acimini/cm-d3-graphs';

const lineData: LineGraphDataInterface[] = [
    {...},
    ...
]

列表下方包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。

id

定义数据 ID 的字符串。\ 如果未提供，将使用自动计算 值。

label

定义数据标签的字符串。 它是必需的。

values

为每个数据定义组值的数字数组。 它是必需的。

extraData

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击线上的一个点时，它会返回关键字 extraData 下的数据。

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-line-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-line-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

import {LineGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const lineConfs: LineGraphConfigurationInterface = {
  id: 'line_chart',
  type: 'line',
  groups: [
    {color: '#1980B6'},
    {color: '#ec1f1f'}
  ]
}

Data

import {LineGraphDataInterface} from '@acimini/cm-d3-graphs';

const lineData: LineGraphDataInterface[] = [
  {values: [-12, 34], label: 'Label1'},
  {values: [23, -5], label: 'Label2'},
  {values: [1, 7], label: 'Label3'},
  {values: [67, 31], label: 'Label4'},
  {values: [-43, -43], label: 'Label5'},
  {values: [2, -89], label: 'Label6'},
  {values: [98, 11], label: 'Label7'},
  {values: [-53, 26], label: 'Label8'},
  {values: [-29, 26], label: 'Label9'},
  {values: [31, 1], label: 'Label10'},
  {values: [81, -12], label: 'Label11'},
  {values: [60, 51], label: 'Label12'},
  {values: [-4, -17], label: 'Label13'},
  {values: [35, 67], label: 'Label14'},
  {values: [19, 56], label: 'Label15'},
  {values: [-93, 5], label: 'Label16'},
  {values: [51, 34], label: 'Label17'},
  {values: [56, 76], label: 'Label18'},
  {values: [-48, 87], label: 'Label19'},
  {values: [11, -32], label: 'Label20'}
]

Range slider

Configurations

要正确配置图形，可以使用RangeSliderGraphConfigurationInterface

import {RangeSliderGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const rangeSliderConf: RangeSliderGraphConfigurationInterface = {
  ...
}

，列表下方包含范围滑块图表的所有可用配置。 \ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的，并且必须是range-slider。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

events

一个对象，用于设置图表上启用的事件。

{
    rangeChanging: boolean,
    rangeChanged: boolean
}

• rangeChanging: if true, the event rangeChanging will be emitted during range selection. The event contains the data of the range selected.
• rangeChanged: if true, the event rangeChanged will be emitted at the end of selection. The event contains the data of the range selected.

如果未提供，将使用默认值。

{
    rangeChanging: false,
    rangeChanged: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

tooltipFormat

一个函数，它定义了当鼠标移到一个点上时出现的工具提示的格式。

(label: string, value: number) => string

如果未提供，将使用默认值。

(label, value) => label + ': ' + value

orientation

它可以是水平或垂直并定义图形的方向。\ 如果未提供，则默认值为水平。

axis

定义轴外观的对象。

{
    showAxisX: boolean,
    showAxisY: boolean,
    invertAxisX: boolean,
    invertAxisY: boolean,
    labelXOrientation: 'horizontal' | 'vertical' | 'oblique',
    labelYOrientation: 'horizontal' | 'vertical' | 'oblique',
    tickFormatX: (d: string) => string,
    tickFormatY: (d: string) => string,
    lineColor: string,
    textColor: string
}

• showAxisX: if true, enables the axis along the horizontal direction.
• showAxisY: if true, enables the axis along the vertical direction.
• invertAxisX: if true, inverts the axis along the horizontal direction.
• invertAxisY: if true, inverts the axis along the vertical direction.
• labelXOrientation: defines the orientation of the tick label for the horizontal axis.
• labelYOrientation: defines the orientation of the tick label for the vertical axis.
• tickFormatX: a function that returns the tick label formatted for the horizontal axis.
• tickFormatY: a function that returns the tick label formatted for the vertical axis.
• lineColor: defines the color of the axes.
• textColor: defines the tick label color.

如果未提供，将使用默认值。

{
    showAxisX: true,
    showAxisY: false,
    invertAxisX: false,
    invertAxisY: false,
    labelXOrientation: 'horizontal',
    labelYOrientation: 'horizontal',
    lineColor: 'black',
    textColor: 'black'
}

track

定义轨道外观的对象。

{
    color: string,
    width: number,
    insetColor: string,
    insetWidth: number,
    fillColor: string,
    fillWidth: number
}

• color: defines the border color of the track.
• width: defines the border width of the track.
• insetColor: defines the color of the track outside the range selected.
• insetWidth: defines the width of the track outside the range selected.
• fillColor: defines the color of the track into the range selected.
• fillWidth: defines the width of the track into the range selected.

如果未提供，将使用默认值。

{
    color: '#bbb',
    width: 6,
    insetColor: '#eee',
    insetWidth: 4,
    fillColor: '#3883fa',
    fillWidth: 4
}

interval

定义值间隔的对象。

{
    type: 'discrete' | 'continuous',
    step: number
}

• type: if set to discrete, the interval will be discrete and only values defined in data will be selectable. If set to continuos, all values between start and end values will be selectable.
• step: defines minimum range selectable. It works if handle type is double.

如果未提供，将使用默认值。

{
    type: 'discrete'
}

handle

定义句柄外观的对象。

{
    strokeColor: string,
    fillColor: string,
    type: 'single' | 'double',
    showTooltip: 'never' | 'always' | 'on-hover'
}

• strokeColor: defines the border color of the handle.
• fillColor: defines the inner color of the handle.
• type: if it is single, we will have a single handle, and we can select only a specific value of the interval. If it is double, we will have two handles and we can select a range.
• showTooltip: set the visibility of the handle tooltip.

如果未提供，将使用默认值。

{
    strokeColor: '#777',
    fillColor: 'white',
    type: 'double',
    showTooltip: 'always'
}

Data

范围滑块的数据具有特定格式，由 RangeSliderGraphDataInterface

import {RangeSliderGraphDataInterface} from '@acimini/cm-d3-graphs';

const rangeSliderData: RangeSliderGraphDataInterface[] = [
    {...},
    ...
]

在列表下方定义，该列表包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。

id

定义数据 ID 的字符串。\ 如果未提供，将使用自动计算 值。

label

定义数据标签的字符串。 它是必需的。

value

定义数据值的数字。 它是必需的。

extraData

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击线上的一个点时，它会返回关键字 extraData 下的数据。

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-range-slider-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-range-slider-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

import {RangeSliderGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const rangeSldierConfs: RangeSliderGraphConfigurationInterface = {
  id: 'range_slider_chart',
  type: 'range-slider',
  tooltipFormat: (label, value) => value.toFixed(2),
  axis: {
    tickFormatX: d => Number(d).toFixed(2)
  }
}

Data

import {RangeSliderGraphDataInterface} from '@acimini/cm-d3-graphs';

const rangeSliderData: RangeSliderGraphDataInterface[] = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 },
  { value: 6 },
  { value: 7 },
  { value: 8 },
  { value: 9 },
  { value: 10 },
  { value: 11 },
  { value: 12 },
  { value: 13 },
  { value: 14 },
  { value: 15 },
  { value: 16 },
  { value: 17 },
  { value: 18 },
  { value: 19 },
  { value: 20 },
  { value: 21 },
  { value: 22 },
  { value: 23 },
  { value: 24 },
  { value: 25 },
  { value: 26 },
  { value: 27 },
  { value: 28 },
  { value: 29 },
  { value: 30 }
]

Tree

Configurations

要正确配置图形，可以使用 TreeGraphConfigurationInterface

import {TreeGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const treeConf: TreeGraphConfigurationInterface = {
  ...
}

在列表下方，其中包含树形图的所有可用配置。\ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的并且必须是树。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

events

一个对象，用于设置图表上启用的事件。

{
    clickOnElement: boolean
}

• clickOnElement: if true, the event clickOnNode will be emitted each time user clicks on a node. The event contains the data of the node clicked.

如果未提供，将使用默认值。

{
    clickOnElement: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

orientation

它可以是水平或垂直并定义图形的方向。\ 如果未提供，则默认值为vertical。

zoom

定义缩放配置的对象。

{
    minZoom: number,
    maxZoom: number
}

• minZoom: defines the minimum zoom level available.
• maxZoom: defines the maximum zoom level available.

如果未提供，则不设置任何限制。

nodes

定义节点外观的对象。

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    distanceBetweenBrothers: number,
    distanceBetweenCousins: number,
    distanceBetweenParentAndChild: number,
    expandable: boolean,
    maxInitialExpandedLevel: number,
    additionalClasses: string
}

• shape: sets the shape for all nodes. It can be overwritten by single data (see section below).
• collapsedColor: defines the color of the node when it is collapsed.
• expandedColor: defines the color of the node when it is expanded.
• strokeColor: defines the color of the border of the node.
• strokeWidth: defines the width of the border of the node.
• circleRadius: defines the radius of the node if shape is circle.
• rectangleDimensions: defines the dimensions of the node if shape is rect.
• squareDimensions: defines the dimensions of the node if shape is square.
• rhombusDimensions: defines the dimensions of the node if shape is rhombus.
• distanceBetweenBrothers: defines the distance between two nodes at the same level with the same parent.
• distanceBetweenCousins: defines the distance between two nodes at different level with a different parent.
• distanceBetweenParentAndChild: defines the distance between parent and its children.
• expandable: sets if nodes with children can be collapsed and expanded.
• maxInitialExpandedLevel: if expandable is true, defines the last level visible.
• additionalClasses: list of additional classes associated to nodes (example "class1 class2 …"). It's important to put ::ng-deep before class definition.

如果未提供，将使用默认值。

{
    shape: 'circle',
    collapsedColor: 'lightsteelblue',
    expandedColor: 'white',
    strokeColor: 'lightsteelblue',
    circleRadius: 10,
    rectangleDimensions: {width: 150, height: 40},
    squareDimensions: 80,
    rhombusDimensions: 120,
    distanceBetweenBrothers: 20,
    distanceBetweenCousins: 40,
    distanceBetweenParentAndChild: 150,
    expandable: true,
    maxInitialExpandedLevel: 2
}

links

定义链接外观的对象。

{
    color: string,
    arrow: boolean,
    arrowDirection: 'start' | 'end',
    width: string
}

• color: defines the color of the links.
• arrow: if true add arrows to the links.
• arrowDirection: if arrow is true, set the position of the arrow.
• width: defines the width of the links.

如果未提供，将使用默认值。

{
    color: 'lightsteelblue',
    arrow: true,
    arrowDirection: 'end',
    width: '0.125rem'
}

label

定义标签外观的对象。

{
    color: string,
    padding: {top: number, left: number, right: number, bottom: number},
    'font-size': number
}

• color: defines the color of the labels.
• padding: defines the padding of the labels.
• font-size: defines the font size of the labels.

如果未提供，将使用默认值。

{
    color: 'black',
    padding: {top: 5, left: 10, right: 10, bottom: 5}
}

Data

树的数据具有特定格式，由 TreeGraphDataInterface

import {TreeGraphDataInterface} from '@acimini/cm-d3-graphs';

const treeData: TreeGraphDataInterface[] = [
    {...},
    ...
]

在列表下方定义，其中包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。

id

定义数据 ID 的字符串。\ 如果未提供，将使用自动计算 值。

label

定义数据标签的字符串。 它是必需的。\ 如果标签包含特殊字符 %nl%，它将被分成多行（例如“hi %nl%my name is Andrea”，结果为“hi”和“my name is Andrea”两条不同的线）。

extraData

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击一个节点时，它会返回关键字 extraData 下的数据。

node

定义单个节点外观的对象。

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    labelColor: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    additionalClasses: string
}

• shape: sets the shape for single node.
• collapsedColor: defines the color of the node when it is collapsed.
• expandedColor: defines the color of the node when it is expanded.
• strokeColor: defines the color of the border of the node.
• strokeWidth: defines the width of the border of the node.
• labelColor: defines the color of the node label.
• circleRadius: defines the radius of the node if shape is circle.
• rectangleDimensions: defines the dimensions of the node if shape is rect.
• squareDimensions: defines the dimensions of the node if shape is square.
• rhombusDimensions: defines the dimensions of the node if shape is rhombus.
• additionalClasses: list of additional classes associated to single node (example "class1 class2 …"). It's important to put ::ng-deep before class definition.

如果未提供，将使用配置中设置的值。

link

定义单个链接外观的对象。

{
    color: string,
    width: string
}

• color: defines the color of the single link.
• width: defines the width of the single link.

如果未提供，将使用配置中设置的值。

children

对象数组，其中单个元素具有与单个节点相同的结构。

{
    children: TreeGraphDataInterface[]
}

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-tree-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-tree-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

import {TreeGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const treeConfs: TreeGraphConfigurationInterface = {
  id: 'tree_chart',
  type: 'tree',
  nodes: {
    shape: 'rect'
  },
  zoom: {
    minZoom: 0.5,
    maxZoom: 4
  }
}

Data

import {TreeGraphDataInterface} from '@acimini/cm-d3-graphs';

const treeData: TreeGraphDataInterface[] = [
  {
    label: 'Top Level with a very very long text',
    node: {
      shape: 'square'
    },
    children: [
      {
        label: 'Level 2: A',
        children: [
          {
            label: 'Son of A with a very very long text' ,
            children: [
              {
                label: 'Son of son of A'
              },
              {
                label: 'Daughter of son of A'
              }
            ]
          },
          {
            label: 'Daughter of A',
            children: [
              {
                label: 'Son of son of A'
              },
              {
                label: 'Daughter of son of A'
              }
            ]
          }
        ]
      },
      {
        label: 'Level 2: B',
        node: {
          shape: 'rhombus'
        },
        children: [
          {
            label: 'Son of B with a very very long text'
          },
          {
            label: 'Daughter of B'
          }
        ]
      },
      {
        label: 'Level 2: B',
        children: [
          {
            label: 'Son of B',
            children: [
              {
                label: 'Daughter of A',
                children: [
                  {
                    label: 'Son of son of A'
                  },
                  {
                    label: 'Daughter of son of A'
                  }
                ]
              }
            ]
          },
          {
            label: 'Daughter of B'
          }
        ]
      }
    ]
  }
]

Flow chart

Configurations

要正确配置图形，可以使用 FlowChartGraphConfigurationInterface

import {FlowChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const flowChartConf: FlowChartGraphConfigurationInterface = {
  ...
}

在列表下方，其中包含流程图的所有可用配置。\ 大多数配置都是可选的，如果未提供值，将设置默认值。

id

设置图表 ID 的字符串。 它是必需的。

type

定义图表类型的字符串。 它是必需的，并且必须是流程图。

margin

一个对象，用于设置图形与其容器之间的边距。

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

如果未提供，将使用默认值。

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

events

一个对象，用于设置图表上启用的事件。

{
    clickOnElement: boolean
}

• clickOnElement: if true, the event clickOnNode will be emitted each time user clicks on a node. The event contains the data of the node clicked.

如果未提供，将使用默认值。

{
    clickOnElement: false
}

overflowX

启用沿水平方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图形不会调整为容器宽度，并且会显示水平滚动条。

overflowY

启用沿垂直方向溢出的布尔值。\ 如果未提供，则默认为 false。\ 如果启用，图表不会调整到容器高度，并且会显示垂直滚动条。

orientation

它可以是水平或垂直并定义图形的方向。\ 如果未提供，则默认值为vertical。

zoom

定义缩放配置的对象。

{
    minZoom: number,
    maxZoom: number
}

• minZoom: defines the minimum zoom level available.
• maxZoom: defines the maximum zoom level available.

如果未提供，则不设置任何限制。

nodes

定义节点外观的对象。

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    distanceBetweenBrothers: number,
    distanceBetweenCousins: number,
    distanceBetweenParentAndChild: number,
    expandable: boolean,
    maxInitialExpandedLevel: number,
    icon: string,
    additionalClasses: string
}

• shape: sets the shape for all nodes. It can be overwritten by single data (see section below).
• collapsedColor: defines the color of the node when it is collapsed.
• expandedColor: defines the color of the node when it is expanded.
• strokeColor: defines the color of the border of the node.
• strokeWidth: defines the width of the border of the node.
• circleRadius: defines the radius of the node if shape is circle.
• rectangleDimensions: defines the dimensions of the node if shape is rect.
• squareDimensions: defines the dimensions of the node if shape is square.
• rhombusDimensions: defines the dimensions of the node if shape is rhombus.
• distanceBetweenBrothers: defines the distance between two nodes at the same level with the same parent.
• distanceBetweenCousins: defines the distance between two nodes at different level with a different parent.
• distanceBetweenParentAndChild: defines the distance between parent and its children.
• expandable: sets if nodes with children can be collapsed and expanded.
• maxInitialExpandedLevel: if expandable is true, defines the last level visible.
• icon: sets the icon for all nodes. It can be overwritten by single data (see section below).
• additionalClasses: list of additional classes associated to nodes (example "class1 class2 …"). It's important to put ::ng-deep before class definition.

如果未提供，将使用默认值。

{
    shape: 'circle',
    collapsedColor: 'lightsteelblue',
    expandedColor: 'white',
    strokeColor: 'lightsteelblue',
    circleRadius: 10,
    rectangleDimensions: {width: 150, height: 40},
    squareDimensions: 80,
    rhombusDimensions: 120,
    distanceBetweenBrothers: 20,
    distanceBetweenCousins: 40,
    distanceBetweenParentAndChild: 150
}

links

定义链接外观的对象。

{
    color: string,
    arrow: boolean,
    arrowDirection: 'start' | 'end',
    shape: 'smooth' | 'straight',
    width: string
}

• color: defines the color of the links.
• arrow: if true add arrows to the links.
• arrowDirection: if arrow is true, set the position of the arrow.
• shape: defines the shape of the links.
• width: defines the width of the links.

如果未提供，将使用默认值。

{
    color: 'lightsteelblue',
    arrow: true,
    arrowDirection: 'end',
    shape: 'smooth',
    width: '0.125rem'
}

label

定义标签外观的对象。

{
    color: string,
    padding: {top: number, left: number, right: number, bottom: number},
    'font-size': number
}

• color: defines the color of the labels.
• padding: defines the padding of the labels.
• font-size: defines the font size of the labels.

如果未提供，将使用默认值。

{
    color: 'black',
    padding: {top: 5, left: 10, right: 10, bottom: 5}
}

clusters

定义集群外观的对象。

{
  position: 'default' | 'full-space',
  strokeColor: string,
  fillColor: string,
  borderRadius: number,
  label: {
    color: string,
    position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center',
    'font-size': number,
    padding: {top: number, left: number, right: number, bottom: number}
  };
}

• position: defines if the cluster is drawn around its nodes, or if it occupies the total width/height of the graph in case of vertical/horizontal orientation.
• strokeColor: defines the border color of the clusters.
• fillColor: defines the inner color of the clusters.
• shape: defines the shape of the clusters.
• label: an object that defines the appearance of the cluster label.
• color: defines the color of the label.
• position: defines the position of the label within the cluster.
• font-size: defines the font size of the label.
• padding: defines the padding of the label.

如果未提供，将使用默认值。

{
    strokeColor: 'lightsteelblue',
    fillColor: 'transparent',
    position: 'default',
    shape: 'rectangle',
    label: {
        color: 'lightsteelblue',
        position: 'center',
        'font-size': 25,
        padding: {top: 5, left: 10, right: 10, bottom: 5}
    }
}

Data

流程图的数据具有特定格式，由 FlowChartGraphDataInterface 定义，

import {FlowChartGraphDataInterface} from '@acimini/cm-d3-graphs';

const flowChartData: FlowChartGraphDataInterface[] = [
    {...},
    ...
]

下面是一个列表，其中包含单个数据可以具有的所有属性。\ 大多数属性都是可选的，如果未提供值，将设置默认值。\ 流程图数据不同于其他图形。 数据按节点（必需）、边（必需）和簇（可选）划分。\ 这些元素中的每一个都具有相同的接口 FlowChartGraphDataInterface，因此某些属性对节点无用，但对边则无用，反之亦然。

id (configuration for node)

定义数据 ID 的 string。 它是必需的。

label (configuration for node and cluster)

定义数据标签的字符串。 它是必需的。\ 如果标签包含特殊字符 %nl%，它将被分成多行（例如“hi %nl%my name is Andrea”，结果为“hi”和“my name is Andrea”两条不同的线）。

extraData (configuration for node)

定义与数据关联的额外数据的对象。 它可以包含每个额外的信息。\ 例如，当用户点击一个节点时，它会返回关键字 extraData 下的数据。

node (configuration for node)

定义单个节点外观的对象。

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    labelColor: string,
    icon: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    additionalClasses: string
}

• shape: sets the shape for single node.
• collapsedColor: defines the color of the node when it is collapsed.
• expandedColor: defines the color of the node when it is expanded.
• strokeColor: defines the color of the border of the node.
• strokeWidth: defines the width of the border of the node.
• labelColor: defines the color of the node label.
• icon: sets the icon for single node.
• circleRadius: defines the radius of the node if shape is circle.
• rectangleDimensions: defines the dimensions of the node if shape is rect.
• squareDimensions: defines the dimensions of the node if shape is square.
• rhombusDimensions: defines the dimensions of the node if shape is rhombus.
• additionalClasses: list of additional classes associated to node (example "class1 class2 …"). It's important to put ::ng-deep before class definition.

如果未提供，将使用配置中设置的值。

link (configuration for edge)

定义单个链接外观的对象。

{
    color: string,
    width: string
}

• color: defines the color of the single link.
• width: defines the width of the single link.

如果未提供，将使用配置中设置的值。

source (configuration for edge)

定义边缘源节点 ID 的 string。 它是必需的。

target (configuration for edge)

定义边缘目标节点 ID 的 string。 它是必需的。

nodes (configuration for cluster)

定义集群中包含的节点 ID 的字符串数组。 它是必需的。

cluster (configuration for cluster)

定义集群外观的对象。

{
    level: number,
    strokeColor: string,
    fillColor: string,
    label: {
        color: string,
        position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'
    }
}

• level: defines the position of the cluster respect to the others. For example, if level is 0, the cluster will be the first and so on. If not provided, clusters will be ordered by the position in the data.
• strokeColor: defines the border color of the cluster. If not provided, will be used the values set in the configuration.
• fillColor: defines the inner color of the cluster. If not provided, will be used the values set in the configuration.
• label: an object that defines the appearance of the cluster label. If not provided, will be used the values set in the configuration.

Component

配置和数据设置好后，最后一步就是将组件导入到html中。

<cm-flow-chart [graphConfigs]="graphConf" [nodes]="graphNodes"
               [edges]="graphEdges" [clusters]="graphClusters"></cm-flow-chart>

重要：组件必须包含在设置了width 和height 的元素中.

Example

下面是一个例子

Configuration

```javascript 从“@acimini/cm-d3-graphs”导入 {FlowChartGraphConfigurationInterface}；

const flowChartConfs: FlowChartGraphConfigurationInterface = { id: '流程图', 类型：“流程图”， 节点：{ 形状：'矩形' }, 飞涨： { 最小缩放：0.5， 最大缩放：4 }, 链接：{ 箭头方向：'结束' }, 方向：'水平'， 集群：{