D3.V4——sankey(桑基图)

本文介绍如何使用D3.V4库绘制桑基图,尽管官方未提供桑基图布局,但通过现有的布局方法可以实现。文章将展示绘制桑基图的具体步骤和代码示例。
摘要由CSDN通过智能技术生成

绘制简单的sankey。思路很简单,定义好布局直接绘制就行。D3.v4官方没有提供sankey的布局方式。布局方式的定义使用的是现成的,直接调用就行。

数据:

var data = {
	'nodes': [{
			name: "0"
		},
		{
			name: "1"
		},
		{
			name: "2"
		},
		{
			name: "3"
		},
		{
			name: "4"
		},
		{
			name: "5"
		},
		{
			name: "6"
		},
		{
			name: "7"
		},
		{
			name: "8"
		}
	],
	'links': [{
			source: 0,
			target: 3,
			value: 10
		},
		{
			source: 1,
			target: 4,
			value: 10
		},
		{
			source: 2,
			target: 4,
			value: 5
		},
		{
			source: 1,
			target: 5,
			value: 5
		},
		{
			source: 3,
			target: 6,
			value: 5
		},
		{
			source: 3,
			target: 7,
			value: 5
		},
		{
			source: 4,
			target: 7,
			value: 10
		},
		{
			source: 4,
			target: 8,
			value: 5
		},
		{
			source: 5,
			target: 8,
			value: 5
		}
	]
};

 

绘制代码: 

function drawSankey(data, time) {

	let sa
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
很高兴为您提供答案。 实现桑基图,需要使用 d3.js 中的 d3.sankey() 函数。该函数可以将数据转换成桑基图的节点和边,然后使用 d3.js 绘图库绘制。 以下是一个简单的实现代码示例: ``` // 定义数据 var data = { nodes: [ {name: "A"}, {name: "B"}, {name: "C"}, {name: "D"} ], links: [ {source: 0, target: 1, value: 10}, {source: 1, target: 2, value: 5}, {source: 1, target: 3, value: 5}, {source: 2, target: 3, value: 2} ] }; // 定义 SVG 容器 var svg = d3.select("body").append("svg") .attr("width", 400) .attr("height", 300); // 定义桑基图布局 var sankey = d3.sankey() .size([400, 300]) .nodeWidth(20) .nodePadding(10) .nodes(data.nodes) .links(data.links) .layout(32); // 绘制桑基图 var path = sankey.link(); svg.selectAll(".link") .data(data.links) .enter().append("path") .attr("class", "link") .attr("d", path) .style("stroke-width", function(d) { return Math.max(1, d.dy); }) .sort(function(a, b) { return b.dy - a.dy; }); svg.selectAll(".node") .data(data.nodes) .enter().append("rect") .attr("class", "node") .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }) .attr("height", function(d) { return d.dy; }) .attr("width", sankey.nodeWidth()); svg.selectAll(".node text") .data(data.nodes) .enter().append("text") .attr("x", function(d) { return d.x + sankey.nodeWidth() / 2; }) .attr("y", function(d) { return d.y + d.dy / 2; }) .attr("dy", ".35em") .text(function(d) { return d.name; }); ``` 以上代码用数据模拟了一个简单的桑基图。请根据您的实际需求修改数据和配置参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值