Fork me on GitHub

用d3画出气泡图

目录

工作中遇到需要实现一个类似气泡图的效果,我试着用d3画了一下。

定义数据格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//定义宽高
let width = 360,
height = 167;
//定义数据结构
let datas = [{
"name": "资源造假",
"value": 3938
}, {
"name": "信用卡逾期",
"value": 3812
}, {
"name": "住房贷款逾期",
"value": 671
}, {
"name": "交通768违法",
"value": 6714
}, {
"name": "涉及进入企业",
"value": 1714
}, {
"name": "超额负债",
"value": 5900
}];
//定义颜色
let linearColor = '#022d3f';
let colors = ['#e91653', '#01d182', '#d6e132', '#017d9e', '#0146a6', '#7a15dc'];

创建svg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//创建svg
let svgDom = d3.select('body')
.append("svg")
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(0,30)');
//添加跟数据长度对等的g节点
let nodes = svgDom.selectAll('.node')
.data(datas)
.enter()
.append('g')
.attr('class', 'node')
.attr('transform', function(d, i) {
let num = i % 2;
return 'translate(' + (56 * i + 30) + ',' + (52 * num + 30) + ')'
});

求圆最大最小半径比例尺

1
2
3
4
5
6
7
8
9
10
11
12
//最小值
let min = d3.min(datas, function(p) {
return p.value;
});
//最大值
let max = d3.max(datas, function(p) {
return p.value;
});
let scaleVal = d3.scaleLinear()
.domain([min, max])
.range([15, 33]);

定义一个线性渐变

1
let defs = svgDom.append("defs");

画圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
nodes.append('circle')
.attr('r', function(d, i) {
return scaleVal(d.value);
})
.attr('cx', 0)
.attr('cy', 0)
.attr('fill', function(d,i){
//添加渐变效果
let linearGradient = defs.append("linearGradient")
.attr("id", "linearColor"+i)
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
let stop1 = linearGradient.append("stop")
.attr("offset", "0%")
.style("stop-color", linearColor.toString());
let stop2 = linearGradient.append("stop")
.attr("offset", "100%")
.style("stop-color", colors[i].toString());
return "url(#" + linearGradient.attr("id") + ")";
})
.attr('stroke',function(d,i){
return colors[i];
})
.attr('opacity',0.8);

画虚线圆

1
2
3
4
5
6
7
8
9
10
11
nodes.append('circle')
.attr('r', function(d, i) {
return scaleVal(d.value) + 4;
})
.attr('cx', 0)
.attr('cy', 0)
.attr('fill', 'transparent')
.attr('stroke-dasharray', "2,2")
.attr('stroke', function(d, i) {
return colors[i];
})

添加文字

1
2
3
4
5
6
7
8
9
10
11
12
13
nodes.append('text')
.attr('dy', 5)
.text(function(d) {
return d.name;
})
.attr('fill', '#fff')
.attr('font-size', 12)
.attr('text-anchor', 'middle');
function randomData() {
console.log(1)
return d3.range(6).map( function() { return Math.random()*20; } )
};

最终效果图

本文d3 相关属性和方法:

stroke-dasharray:属性用来设置描边的点划线的图案范式。就是设置实线和虚线的宽度
d3.range:生成一组数值
d3.scaleLinear:线性比例尺 =>d3.scaleLinear()
domain:定义域 =>domain([min,max])
range:值域 =>range([10,50])

-------------本文结束感谢您的阅读-------------

发布时间:2018年04月02日 - 12:04

最后更新:2018年04月02日 - 12:04

原始链接:https://xn--v4q63d8za.xn--6qq986b3xl/用d3画出气泡图/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

谢谢您给我买糖吃~