Vue+D3.js实现桑基图 流向图

2023-10-28 07:40

本文主要是介绍Vue+D3.js实现桑基图 流向图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

例子来源:React App (a4z.cn)

bp图官方文档:http://bl.ocks.org/npashap/12cd547b1a3270603a139186b05415ff

通过看github源码:

ant-admin/VerticalBPChart.js at master · nelsonkuang/ant-admin (github.com)

ant-admin/D3VerticalBPChart.js at master · nelsonkuang/ant-admin (github.com)

将例子中的桑基图,在vue中实现

效果图:

npm安装:注意版本

npm install d3@4.13.0
npm install wnm-d3-viz

引入方式:

import * as d3 from 'd3';
import * as viz from '../js/d3-viz';//本地引入viz
//或者
import * as viz from "wnm-d3-viz";//npm安装引入viz

其中d3-viz文件需要下载到本地:ant-admin/d3-viz.js at master · nelsonkuang/ant-admin (github.com) 

或者在index.html中引入(注意版本)

    <!-- d3 的 js 文件引入 --><script src="https://d3js.org/d3.v4.min.js"></script><!-- viz 的 js 文件引入 --><script src="https://cdn.jsdelivr.net/npm/wnm-d3-viz@1.0.0/d3-viz.min.js"></script>

 

1.数据结构

const data = [//分别为左边,右边,数据['天猫', '上海', 15216, 25216],['线下自营店', '上海', 11278, 13244],['苏宁易购', '上海', 27, 24],['网上自营店', '上海', 27648, 35411],['线下代理商', '上海', 1551, 1545],['京东', '上海', 22141, 25441],['天猫', '广州', 15453, 15353],['线下自营店', '广州', 24683, 24623],['苏宁易购', '广州', 1862, 654],['线下代理商', '广州', 16228, 13228],['天猫', '北京', 15001, 18001],['线下自营店', '北京', 15001, 1654],['苏宁易购', '北京', 5001, 6541],['网上自营店', '北京', 28648, 29648],['线下代理商', '北京', 9648, 9648],['天猫', '深圳', 3313, 541],['线下自营店', '深圳', 22396, 24396],['苏宁易购', '深圳', 3362, 3762],['网上自营店', '深圳', 22396, 21396],['线下代理商', '深圳', 2473, 2973],['京东', '深圳', 16541, 11541],['苏宁易购', '杭州', 3541, 3599],['线下代理商', '杭州', 3541, 8741],['京东', '杭州', 3654, 9874],['天猫', '武汉', 1738, 110],['线下自营店', '武汉', 12925, 13],['苏宁易购', '武汉', 15413, 0],['线下自营店', '重庆', 2166, 654],['苏宁易购', '重庆', 2286, 3654],['网上自营店', '重庆', 348, 3654],['线下代理商', '重庆', 4244, 3654],['京东', '重庆', 1536, 1654],['线下自营店', '长沙', 351, 654],['线下代理商', '长沙', 405, 541],['线下自营店', '成都', 914, 654],['苏宁易购', '成都', 127, 354],['线下代理商', '成都', 1470, 654],['京东', '成都', 516, 354],['天猫', '东莞', 43, 0],['线下自营店', '东莞', 667, 654],['苏宁易购', '东莞', 172, 354],['网上自营店', '东莞', 149, 541],['线下代理商', '东莞', 1380, 3254],['京东', '东莞', 791, 754],['线下自营店', '苏州', 541, 687],['线下代理商', '苏州', 654, 541],['线下自营店', '南京', 1070, 654],['线下代理商', '南京', 1171, 1541],['京东', '南京', 33, 45],['线下自营店', '佛山', 407, 654],['苏宁易购', '佛山', 541, 874],['线下代理商', '佛山', 457, 674],['京东', '佛山', 541, 365],['线下自营店', '天津', 557, 654],['苏宁易购', '天津', 167, 541],['网上自营店', '天津', 95, 100],['线下代理商', '天津', 1090, 1321],['京东', '天津', 676, 541],['天猫', '合肥', 1195, 1654],['线下自营店', '合肥', 5412, 6541],['苏宁易购', '合肥', 212, 241],['线下代理商', '合肥', 1509, 1654],['天猫', '温州', 3899, 389],['线下自营店', '温州', 147, 321],['苏宁易购', '温州', 455, 541],['网上自营店', '温州', 321, 254],['线下代理商', '温州', 4100, 4512],['天猫', '南宁', 123, 133],['线下自营店', '南宁', 634, 654],['苏宁易购', '南宁', 749, 541],['网上自营店', '南宁', 119, 654],['线下代理商', '南宁', 3705, 4574],['京东', '南宁', 3456, 4000],['线下自营店', '厦门', 828, 1201],['苏宁易购', '厦门', 2808, 3541],['网上自营店', '厦门', 1452, 2000],['线下代理商', '厦门', 2625, 1541],['京东', '厦门', 1920, 1234],['线下自营店', '西安', 1146, 1541],['苏宁易购', '西安', 212, 321],['网上自营店', '西安', 223, 241],['线下代理商', '西安', 1803, 2000],['京东', '西安', 761, 465],['线下自营店', '长春', 527, 654],['苏宁易购', '长春', 90, 120],['线下代理商', '长春', 930, 1241],['京东', '长春', 395, 410],['天猫', '哈尔滨', 7232, 8451],['线下自营店', '哈尔滨', 1272, 2141],['苏宁易购', '哈尔滨', 1896, 3541],['网上自营店', '哈尔滨', 200, 1241],['线下代理商', '哈尔滨', 10782, 15412],['京东', '哈尔滨', 1911, 2000],['线下自营店', '青岛', 495, 521],['苏宁易购', '青岛', 432, 541],['网上自营店', '青岛', 241, 320],['线下代理商', '青岛', 1557, 1600],['京东', '青岛', 24, 30],['线下自营店', '沈阳', 460, 541],['网上自营店', '沈阳', 88, 99],['线下代理商', '沈阳', 956, 365],['线下自营店', '济南', 232, 365],['苏宁易购', '济南', 71, 99],['线下代理商', '济南', 575, 654],['京东', '济南', 368, 354]]

2.核心部分

//绘制桑基图 D3jsdrawSg(){let chart = d3.select(this.$refs.chartRef)let z = d3.scaleOrdinal().range(d3.schemeCategory20)let g = chart.append('g').attr('transform', 'translate(150,100)')//translate(150,100)控制位置let bp = viz.bP() // 定义两个BP图.data(data).min(12).pad(1).height(700).width(300).barSize(35).fill(d => z(d.primary));// 输出BP图数据g.call(bp) // 输出BP图g.append('text').attr('x', -50).attr('y', -8).style('text-anchor', 'middle').text('出货渠道')g.append('text').attr('x', 350).attr('y', -8).style('text-anchor', 'middle').text('城市')g.selectAll('.mainBars')//鼠标滑过事件.on('mouseover', mouseover).on('mouseout', mouseout)g.selectAll('.mainBars').append('text').attr('class', 'label').attr('x', d => (d.part === 'primary' ? -30 : 30)).attr('y', d => +6).text(d => d.key).attr('text-anchor', d => (d.part === 'primary' ? 'end' : 'start'))g.selectAll('.mainBars').append('text').attr('class', 'perc').attr('x', d => (d.part === 'primary' ? -100 : 80)).attr('y', d => +6).text(function(d) {return d3.format('0.0%')(d.percent)}).attr('text-anchor', d => (d.part === 'primary' ? 'end' : 'start'))g.selectAll('.mainBars') // hover.append('title').text(function(d) {return d.key + '\n' + d.value + ' 台手机'})function mouseover(d) {bp.mouseover(d)g.selectAll('.mainBars').select('.perc').text(function(d) {return d3.format('0.0%')(d.percent)})g.selectAll('.mainBars').select('title').text(function(d) {return d.key + '\n' + d.value + ' 台手机'})}function mouseout(d) {bp.mouseout(d)g.selectAll('.mainBars').select('.perc').text(function(d) {return d3.format('0.0%')(d.percent)})g.selectAll('.mainBars').select('title').text(function(d) {return d.key + '\n' + d.value + ' 台手机'})}}

3.源码

<template><div><div class="drawerDiv"><svg ref="chartRef" class="chartSG"></svg></div></div>
</template><script>import * as d3 from 'd3';import * as viz from '../js/d3-viz';export default {data() {return {// 数据data:[['天猫', '上海', 15216, 25216],['线下自营店', '上海', 11278, 13244],['苏宁易购', '上海', 27, 24],['网上自营店', '上海', 27648, 35411],['线下代理商', '上海', 1551, 1545],['京东', '上海', 22141, 25441],['天猫', '广州', 15453, 15353],['线下自营店', '广州', 24683, 24623],['苏宁易购', '广州', 1862, 654],['线下代理商', '广州', 16228, 13228],['天猫', '北京', 15001, 18001],['线下自营店', '北京', 15001, 1654],['苏宁易购', '北京', 5001, 6541],['网上自营店', '北京', 28648, 29648],['线下代理商', '北京', 9648, 9648],['天猫', '深圳', 3313, 541],['线下自营店', '深圳', 22396, 24396],['苏宁易购', '深圳', 3362, 3762],['网上自营店', '深圳', 22396, 21396],['线下代理商', '深圳', 2473, 2973],['京东', '深圳', 16541, 11541],['苏宁易购', '杭州', 3541, 3599],['线下代理商', '杭州', 3541, 8741],['京东', '杭州', 3654, 9874],['天猫', '武汉', 1738, 110],['线下自营店', '武汉', 12925, 13],['苏宁易购', '武汉', 15413, 0],['线下自营店', '重庆', 2166, 654],['苏宁易购', '重庆', 2286, 3654],['网上自营店', '重庆', 348, 3654],['线下代理商', '重庆', 4244, 3654],['京东', '重庆', 1536, 1654],['线下自营店', '长沙', 351, 654],['线下代理商', '长沙', 405, 541],['线下自营店', '成都', 914, 654],['苏宁易购', '成都', 127, 354],['线下代理商', '成都', 1470, 654],['京东', '成都', 516, 354],['天猫', '东莞', 43, 0],['线下自营店', '东莞', 667, 654],['苏宁易购', '东莞', 172, 354],['网上自营店', '东莞', 149, 541],['线下代理商', '东莞', 1380, 3254],['京东', '东莞', 791, 754],['线下自营店', '苏州', 541, 687],['线下代理商', '苏州', 654, 541],['线下自营店', '南京', 1070, 654],['线下代理商', '南京', 1171, 1541],['京东', '南京', 33, 45],['线下自营店', '佛山', 407, 654],['苏宁易购', '佛山', 541, 874],['线下代理商', '佛山', 457, 674],['京东', '佛山', 541, 365],['线下自营店', '天津', 557, 654],['苏宁易购', '天津', 167, 541],['网上自营店', '天津', 95, 100],['线下代理商', '天津', 1090, 1321],['京东', '天津', 676, 541],['天猫', '合肥', 1195, 1654],['线下自营店', '合肥', 5412, 6541],['苏宁易购', '合肥', 212, 241],['线下代理商', '合肥', 1509, 1654],['天猫', '温州', 3899, 389],['线下自营店', '温州', 147, 321],['苏宁易购', '温州', 455, 541],['网上自营店', '温州', 321, 254],['线下代理商', '温州', 4100, 4512],['天猫', '南宁', 123, 133],['线下自营店', '南宁', 634, 654],['苏宁易购', '南宁', 749, 541],['网上自营店', '南宁', 119, 654],['线下代理商', '南宁', 3705, 4574],['京东', '南宁', 3456, 4000],['线下自营店', '厦门', 828, 1201],['苏宁易购', '厦门', 2808, 3541],['网上自营店', '厦门', 1452, 2000],['线下代理商', '厦门', 2625, 1541],['京东', '厦门', 1920, 1234],['线下自营店', '西安', 1146, 1541],['苏宁易购', '西安', 212, 321],['网上自营店', '西安', 223, 241],['线下代理商', '西安', 1803, 2000],['京东', '西安', 761, 465],['线下自营店', '长春', 527, 654],['苏宁易购', '长春', 90, 120],['线下代理商', '长春', 930, 1241],['京东', '长春', 395, 410],['天猫', '哈尔滨', 7232, 8451],['线下自营店', '哈尔滨', 1272, 2141],['苏宁易购', '哈尔滨', 1896, 3541],['网上自营店', '哈尔滨', 200, 1241],['线下代理商', '哈尔滨', 10782, 15412],['京东', '哈尔滨', 1911, 2000],['线下自营店', '青岛', 495, 521],['苏宁易购', '青岛', 432, 541],['网上自营店', '青岛', 241, 320],['线下代理商', '青岛', 1557, 1600],['京东', '青岛', 24, 30],['线下自营店', '沈阳', 460, 541],['网上自营店', '沈阳', 88, 99],['线下代理商', '沈阳', 956, 365],['线下自营店', '济南', 232, 365],['苏宁易购', '济南', 71, 99],['线下代理商', '济南', 575, 654],['京东', '济南', 368, 354]]};},created() {this.drawSg();},mounted() {},methods: {//绘制桑基图 D3jsdrawSg(){//绑定元素 必须svg标签才显示let chart = d3.select(this.$refs.chartRef)let z = d3.scaleOrdinal().range(d3.schemeCategory20)let g = chart.append('g').attr('transform', 'translate(150,100)')let bp = viz.bP() // 定义两个BP图.data(this.data)//绑定数据.min(12).pad(1).height(700).width(300).barSize(35).fill(d => z(d.primary));// 输出BP图数据g.call(bp) // 输出BP图g.append('text').attr('x', -50).attr('y', -8).style('text-anchor', 'middle').text('出货渠道')g.append('text').attr('x', 350).attr('y', -8).style('text-anchor', 'middle').text('城市')g.selectAll('.mainBars').on('mouseover', mouseover).on('mouseout', mouseout)g.selectAll('.mainBars').append('text').attr('class', 'label').attr('x', d => (d.part === 'primary' ? -30 : 30)).attr('y', d => +6).text(d => d.key).attr('text-anchor', d => (d.part === 'primary' ? 'end' : 'start'))g.selectAll('.mainBars').append('text').attr('class', 'perc').attr('x', d => (d.part === 'primary' ? -100 : 80)).attr('y', d => +6).text(function(d) {return d3.format('0.0%')(d.percent)}).attr('text-anchor', d => (d.part === 'primary' ? 'end' : 'start'))g.selectAll('.mainBars') // hover.append('title').text(function(d) {return d.key + '\n' + d.value + ' 台手机'})function mouseover(d) {bp.mouseover(d)g.selectAll('.mainBars').select('.perc').text(function(d) {return d3.format('0.0%')(d.percent)})g.selectAll('.mainBars').select('title').text(function(d) {return d.key + '\n' + d.value + ' 台手机'})}function mouseout(d) {bp.mouseout(d)g.selectAll('.mainBars').select('.perc').text(function(d) {return d3.format('0.0%')(d.percent)})g.selectAll('.mainBars').select('title').text(function(d) {return d.key + '\n' + d.value + ' 台手机'})}}}}
</script><style lang="less" scoped>.drawerDiv{height: 100%;//background-color: black;//color: white;}.chartSG{width: 500px;height: 725px;color: white;}
</style>

遇到什么问题,可留言,看到会尽快回复。

这篇关于Vue+D3.js实现桑基图 流向图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/291724

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络