简单的sankey图组件

最新推荐文章于 2024-09-07 07:45:00 发布

jdk137

最新推荐文章于 2024-09-07 07:45:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：可视化组件文章标签：可视化组件

本文链接：https://blog.youkuaiyun.com/jdk137/article/details/94608583

可视化组件专栏收录该内容

0 篇文章

订阅专栏

sankeySimple是一个基于d3库的简单Sankey图表组件，仅包含两个维度。它提供了节点大小、颜色、维度标题和CSS样式的自定义功能。组件可在github上找到，链接为https://github.com/jdk137/sankeySimple。使用该组件需要d3.js和sankey.js作为依赖，并遵循特定的数据格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sankeySimple

A simple sankey data visualization base on d3’s sankey.js. Two dimensions only.

github地址：
https://github.com/jdk137/sankeySimple

在这里插入图片描述

Requirements:

d3.js
sankey.js

Features:

Two dimension split.
self defined node size, node color, dimension title and css style.

Usage:

        var sankeySimple = new SankeySimple(document.getElementById('chart'), {
          data: data,
          // width: 700,
          // height: 800,
          // nodeWidth: 36,
          // nodePadding: 12,
          // margin: { top: 50, right: 50, bottom: 50, left: 50 },
          // leftTitle: 'Delegations',
          // rightTitle: 'Parties',
          // color: d3.scaleOrdinal(d3.schemeCategory20),
        });

Data format:

  {
    "nodes": [
      { "node": 0, "name": "Anhui", "color": "#9E0142"}, // color is optional
      { "node": 1, "name": "CPC (Communist Party of China)", "color": "#D53E4F"},
      { "node": 2, "name": "Hunan", "color": "#F46D43" },
      { "node": 3, "name": "No party affiliation", "color": "#FDAE61"}
    ],
    "links": [
      { "source": 0, "target": 1, "value": 1 },
      { "source": 0, "target": 3, "value": 2 },
      { "source": 2, "target": 1, "value": 2 },
      { "source": 2, "target": 3, "value": 1 }
    ]
  }