Vue和D3.js的朝阳组件 - vue-d3-sunburst

Vue和D3.js的朝阳组件 - vue-d3-sunburst
插件名称 Vue.D3.sunburst
版本号 v1.9.1
发布时间 2020年8月13日
插件作者 David-Desmaisons

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

序号插件名称序号插件名称
1Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css12Vue.js创建漂亮的图表– Vue Chartkick
2Vue 3的基于SVG的图表库 - vue3-charts13交互式图表和抓图组件– vue-declarative-plots
3使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts14Vue.js的拖放调度图表程序– scheduler-lite
4Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts15Vue.js的简单反应式图表–vue-chartless
5适用于Vue.js的简单SVG图表库 - vue-simple-chart16Vue的可定制和可组合图表– vue-wcharts
6适用于Google图表的Reactive Vue.js包装器-GChart17简单的纯Vue.js图表​​组件 -pure-vue-chart
7Vue.js的现代图表库– Laue18Chart.Js创建简单和漂亮的图表 - vue-chartjs
8Vue.js 图表 Chart.js组件19使用Vue.js和Chart.js构建HTML5画布图表 - vue-chart
9Vue.js的带有SVG和Smith图表组件20Vue FusionCharts轻量级组件 - vue-fusioncharts
10Vue.js的图表库组件 - V-Charts21Vue.js中的动画条形图种族生成器
11Vue.js基于D3.js可自定义的图表​​插件22Vue和D3.js的朝阳组件 - vue-d3-sunburst

特征:

  • 对数据更改有反应
  • 响应尺寸变化
  • 可自定义广告位或公开的方法和事件
  • 可缩放

安装和下载:

# NPM
$ npm install vue-d3-sunburst --save

使用:

<sunburst :data="data">

  <!-- 添加行为 -->
  <template slot-scope="{ on, actions }">
    <highlightOnHover v-bind="{ on, actions }"/>
    <zoomOnClick v-bind="{ on, actions }"/>
  </template>

  <!-- 添加要显示在图形顶部的信息 -->
  <nodeInfoDisplayer slot="top" slot-scope="{ nodes }" :current="nodes.mouseOver" :root="nodes.root" description="of visits begin with this sequence of pages" />

  <!-- 添加底传奇 -->
  <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';
import "vue-d3-sunburst/dist/vue-d3-sunburst.css";

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 }
                ]
              }
            ]
          }
        ]
      }
    }
  }
}

变更日志:

v1.9.1 (08/01/2021)

  • 正确弹出位置+性能提升

v1.8.1 (07/26/2021)

  • 提高性能

v1.8.0 (06/07/2021)

  • 改进的突出显示和标签截断

v1.7.0 (06/02/2021)

  • 添加调整大小事件

v1.6.1 (05/30/2021)

  • 改善显示。增加文字功能。

v1.5.0 (04/25/2021)

  • 更新

v1.3.0(04/24/2021)

  • 更新

v1.2.0(04/21/2021)

  • 将’showLabels’放入Add_label_text

v1.1.0(11/02/2020)

  • 更新