react树形组件_基于D3.js的React型旭日形组件

最新推荐文章于 2024-08-09 07:38:33 发布

cuk5340

最新推荐文章于 2024-08-09 07:38:33 发布

阅读量623

点赞数

文章标签： python vue react java js ViewUI

原文链接：https://vuejsexamples.com/reactive-sunburst-component-based-on-d3-js/

版权

react树形组件

Vue.D3。森伯斯特 (Vue.D3.Sunburst)

Vue.D3.Sunburst provides a reusable vue sunburst charts component relying on D3.js.

Vue.D3.Sunburst提供了依赖于D3.js的可重用的vue sunburst图表组件。

View demo 查看演示 Download Source 下载源

Sunburst is the main component of this library and display sunburst chart based on data props using children property for hierarchy, name property for naming and size property for arcs size.

Sunburst是该库的主要组件，它基于data道具显示森伯斯特图表，使用children属性作为层次结构， name属性作为命名属性， size属性作为圆弧大小。

Sunburst component provides three optional slots:

Sunburst组件提供了三个可选插槽：

legend and top slots are intended to be used to display additional information such as legend
legend和top插槽用于显示其他信息，例如图例
default slot is intended to receive renderless component providing behavior: for example, highlighting on mouse over or zoom on click
default slot旨在接收提供行为的无渲染组件：例如，鼠标悬停时突出显示或单击时放大

Components providing standard and reusable features are provided.

提供了提供标准和可重复使用功能的组件。

特征 (Features)

Reactive to data changes
对数据更改有React
Responsive to size changes
响应尺寸变化
Customizable with slot or exposed methods and events
可自定义广告位或公开的方法和事件
Zoomable
可缩放

安装 (Install)

npm i vue-d3-sunburst

用法 (Usage)

<sunburst :data="data">

  <!-- Add behaviors -->
  <template slot-scope="{ nodes, actions }">
    <highlightOnHover :nodes="nodes" :actions="actions" />
    <zoomOnClick :nodes="nodes" :actions="actions" />
  </template>

  <!-- Add information to be displayed on top the graph -->
  <nodeInfoDisplayer slot="top" slot-scope="{ nodes }" :current="nodes.mouseOver" :root="nodes.root" description="of visits begin with this sequence of pages" />

  <!-- Add bottom legend -->
  <breadcrumbTrail slot="legend" slot-scope="{ nodes, colorGetter, width }" :current="nodes.mouseOver" :root="nodes.root" :colorGetter="colorGetter" :from="nodes.clicked" :width="width" />

</sunburst>

import {
  breadcrumbTrail,
  highlightOnHover,
  nodeInfoDisplayer,
  sunburst,
  zoomOnClick
} from 'vue-d3-sunburst'

export default {
  components: {
    breadcrumbTrail,
    highlightOnHover,
    nodeInfoDisplayer,
    sunburst,
    zoomOnClick
  },
  data() {
    return { 
      tree:  {
      "name": "flare",
        "children": [
          {
            "name": "analytics",
            "children": [
              {
                "name": "cluster",
                "children": [
                  { "name": "AgglomerativeCluster", "size": 3938 },
                  { "name": "CommunityStructure", "size": 3812 },
                  { "name": "HierarchicalCluster", "size": 6714 },
                  { "name": "MergeEdge", "size": 743 }
                ]
              },
              {
                "name": "graph",
                "children": [
                  { "name": "BetweennessCentrality", "size": 3534 },
                  { "name": "LinkDistance", "size": 5731 },
                  { "name": "MaxFlowMinCut", "size": 7840 },
                  { "name": "ShortestPaths", "size": 5914 },
                  { "name": "SpanningTree", "size": 3416 }
                ]
              },
              {
                "name": "optimization",
                "children": [
                  { "name": "AspectRatioBanker", "size": 7074 }
                ]
              }
            ]
          }
        ]
      }
    }
  }
}

陷阱 (Gotchas)

This component is responsive and will adjust to resizing. In order for this to work properly, you must define for this component or its parent wether:

该组件是响应性的，并将调整为调整大小。为了使其正常工作，必须为该组件或其父组件定义：

a height or a max-height
高度或最大高度
or a width or a max-width.
或宽度或最大宽度。

Failing to do so may result in a component whose size that will keep increasing.

否则可能会导致组件尺寸不断增加。

API (API)

朝阳 (sunburst)

插槽 (slots)

legend Use this slot to add information on top or bottom of the graph

legend使用此插槽可在图的顶部或底部添加信息
top Use this slot to add information on top of the graph

top使用此插槽可在图表顶部添加信息
default Use this slot to add behaviors to the sunburst

default使用此插槽将行为添加到朝阳

道具 (props)

data Object (optional)

data 对象 ( 可选 )

Sunburst data where children property is a array containing children.

sunburst数据，其中children属性是包含子级的数组。
color-scheme String (optional) default: provided by injected defaultSchemeColor with a fall back to schemeAccent

color-scheme 字符串 ( 可选 ) default: provided by injected defaultSchemeColor with a fall back to schemeAccent

D3 color scheme to be used.

使用D3配色方案。
get-category-for-color Function (optional) default: 'useNameForColor'

get-category-for-color 函数 ( 可选 )( default: 'useNameForColor'

Function used to map an item and its color. (nodeD3: Object) => category: Number | String By default use the node name

用于映射项目及其颜色的函数。 (nodeD3：对象)=>类别：数字| 字符串默认情况下使用节点名称
min-angle-displayed Number (optional) default: 0.005

min-angle-displayed 数字 ( 可选 ) default: 0.005

Minimal arc angle to be displayed (in radian).

要显示的最小弧角(弧度)。
arc-identification Function (optional) default: 'recursiveName'

arc-identification 功能 ( 可选 ) default: 'recursiveName'

Function used to identify an arc, will be used during graph updates. (nodeD3: Object) => id: String

在图形更新期间将使用用于识别圆弧的功能。 (nodeD3：对象)=> id：字符串
in-animation-duration Number (optional) default: 100

in-animation-duration 编号 ( 可选 )， default: 100

Duration for in animation in milliseconds

动画的持续时间(以毫秒为单位)
out-animation-duration Number (optional) default: 1000

out-animation-duration Number ( 可选 )， default: 1000

Duration for out animation in milliseconds

输出动画的持续时间(以毫秒为单位)

大事记 (events)

mouseOverNode

mouseOverNode

Fired when mouse is over a sunburst node.

当鼠标悬停在森伯斯特节点上时触发。

arguments:

参数：
- value value Object - {node, sunburst} The corresponding node and sunburst component对象 -{node，sunburst}相应的节点和sunburst组件
clickNode

clickNode

Fired when sunburst node is clicked.

单击森伯斯特节点时触发。

arguments:

参数：
- value value Object - {node, sunburst} The corresponding node and sunburst component对象 -{node，sunburst}相应的节点和sunburst组件

方法 (methods)

highlightPath(node, opacity)

highlightPath(node, opacity)

Highlight the arc path leading to a given node.

突出显示通向给定节点的弧形路径。

parameters:

参数：
- node node Object - the D3 node to highlight对象 -将D3节点亮点
- opacity opacity Number - opacity of the none highlighted nodes, default to 0.3数量 -在没有突出节点的透明度，默认为0.3
zoomToNode(node)

zoomToNode(node)

Zoom to a given node.

缩放到给定的节点。

parameters:

参数：
- node node Object - the D3 node to zoom to.对象 -将D3节点放大到。
resetHighlight()

resetHighlight()

Reset the highlighted path

重置突出显示的路径

作为插槽实现提供的其他可选组件 (Other optional components provided as slot implementation)

Besides sunburst component, Vue.D3.Sunburst provides additional optional components that can be used out of the box as slot implementations. There are two kinds of additional components:

除了sunburst组件之外，Vue.D3.Sunburst还提供了其他可选组件，这些组件可以直接用作插槽实现。有两种附加组件：

the "renderfull" components provide visual additional visual information on the nodes. They can be used as legend or top slots.
“ renderfull”组件在节点上提供可视的其他可视信息。它们可以用作legend或top插槽。
the renderless components provide predefined behaviors for the sunburst components. They can be used as default slots. It is possible to combine behavior using a root template slot element as in the example.
无渲染组件为森伯斯特组件提供了预定义的行为。它们可以用作默认插槽。如示例中所示，可以使用根模板插槽元素来组合行为。

“ Renderfull”组件 ("Renderfull" components)

面包屑 (breadcrumbTrail)

Breadcrumb trail component displaying path between root node and current node. Can be used as a legend slot of sunburst component.

面包屑路径组件显示根节点和当前节点之间的路径。可用作旭日形组件的legend槽。

道具 (props)

root Object (optional)

root 对象 ( 可选 )

Root node

根节点
current Object (optional)

current 对象 ( 可选 )

Current node

当前节点
from Object (optional)

from Object ( 可选 )

Reference node, parents nodes of the current will have an opacity below 1

参考节点，当前父节点的不透明度低于1
color-getter Function (required)

color-getter 功能 ( 必需 )

ColorGetter exposed by sunburst

暴露在阳光下的ColorGetter
width Number (optional)

width 编号 ( 可选 )

Sunburst width

朝阳宽度
order Number (optional) default: 1

order 号 ( 可选 ) default: 1

Css Order. If 1 the slot is displayed below the sunburst, if 0 the slot is displayed on top the sunburst

CSS顺序。如果为1，则该插槽将显示在朝阳下方，如果为0，则该插槽将显示在朝阳上方
item-width Number (optional) default: 80

item-width Number ( 可选 )， default: 80

Bread crumb item width

面包屑项目宽度
item-height Number (optional) default: 30

item-height 编号 ( 可选 )， default: 30

Bread crumb item height

面包屑项目高度
spacing Number (optional) default: 3

spacing 编号 ( 可选 )， default: 3

Spacing between breadcrumb items

面包屑项目之间的间距
tail-width Number (optional) default: 10

tail-width 数字 ( 可选 )， default: 10

With of tailing element

带尾矿元素

nodeInfoDisplayer (nodeInfoDisplayer)

Component that display the percentage value of the current node relative to root. Can be used as a "top" slot of sunburst component.

显示当前节点相对于根的百分比值的组件。可用作森伯斯特组件的“顶部”插槽。

道具 (props)

root Object (optional)

root 对象 ( 可选 )

Root node

根节点
current Object (optional)

current 对象 ( 可选 )

Current node

当前节点
description String (required)

description 字符串 ( 必需 )

Text to be displayed

要显示的文字

行为的 (Behavioral)

These components can be used as a default slot of the sunburst component which received as attributes:

这些组件可以用作以属性形式接收的sunburst组件的默认插槽：

nodes which is an object containing the attributes:

包含属性的对象的nodes ：
- root: the graph root noderoot ：图的根节点
- clicked: the last clicked node or nullclicked ：最后单击的节点，或者为null
- mouseOver: the last node that received a mouse-over event or null if the mouse leaves the graphmouseOver ：最后一个接收到鼠标悬停事件的节点；如果鼠标离开图形，则为null
- zoomed: the zoomed nodezoomed ：缩放的节点
- highlighted: the highlighted nodehighlighted ：高亮的节点
actions which is an object containing the attributes:

actions是包含属性的对象：
- highlightPath: function that takes a node and highlight the path going from the root to the given nodehighlightPath ：接受节点并突出显示从根到给定节点的路径的函数
- zoomToNode: function that takes a node and zoom to the corresponding nodezoomToNode ：获取节点并缩放到相应节点的函数
- resetHighlight: function that resets the highlightingresetHighlight ：重置突出显示的功能

zoomOnClick (zoomOnClick)

Renderless component providing the zoom on click behavior. Can be used as a default slot of sunburst component.

无渲染组件，可放大点击行为。可用作森伯斯特组件的默认插槽。

道具 (props)

nodes Object (optional)

nodes 对象 ( 可选 )

Sunburst nodes. Typically provided by sunburst default slot.

森伯斯特节点。通常由森伯斯特默认插槽提供。
actions Object (required)

actions 对象 ( 必填 )

Sunburst actions. Typically provided by sunburst default slot.

朝阳动作。通常由森伯斯特默认插槽提供。

HighlightOnHover (highlightOnHover)

Renderless component providing path highlighting on mouse over behavior. Can be used as a default slot of sunburst component.

无渲染组件可在鼠标悬停行为上提供路径突出显示。可用作森伯斯特组件的默认插槽。

道具 (props)

nodes Object (optional)

nodes 对象 ( 可选 )

Sunburst nodes. Typically provided by sunburst default slot.

森伯斯特节点。通常由森伯斯特默认插槽提供。
actions Object (required)

actions 对象 ( 必填 )

Sunburst nodes. Typically provided by sunburst default slot.

森伯斯特节点。通常由森伯斯特默认插槽提供。