d3.js 的cdn地址
<script src="https://cdn.bootcss.com/d3/5.9.2/d3.js"></script>
<script src="https://cdn.bootcss.com/d3/5.9.2/d3.min.js"></script>
<body>
<svg width="960" height="960" font-family="sans-serif" font-size="14" text-anchor="middle" style="border: 1px solid red;"></svg>
</body>
<script>
console.log(d3) ;
console.log(d3.version);
var data_1 = [
{"name":"自动化运维1","count":50 ,"color_type":"1"},
{"name":"自动化运维1","count":100,"color_type":"2"},
{"name":"自动化运维1","count":150,"color_type":"3"},
{"name":"自动化运维1","count":50 ,"color_type":"1"},
{"name":"自动化运维1","count":100,"color_type":"2"},
{"name":"自动化运维1","count":150,"color_type":"3"}, //这里的三种颜色类型，对应三个径向渐变对象
]
function initCircle(data){
//清空作图区域
d3.select("svg").selectAll("g").remove();
//给svg对象赋宽高的属性
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var format = d3.format(",d");
//var color = d3.scaleOrdinal(d3.schemeCategory20c);
// var color = ["#CCFF00","#FF0033","#336699","#33FF66","#669966","#66CCFF","#99CCFF","#CCCCCC"];//自定义颜色
var pack = d3.pack()
.size([width, height])
.padding(5);
var num,pid;
var root = d3.hierarchy({children: data})
.sum(function(d) { return d.count; })
.each(function(d) {
if(d.parent == null) {num = d.value};
if (id = d.data.name){
var id
d.id = id;
d.class = id;
pid = num/(d.value);
d.colorPick = pid>100?5:(pid>50?4:(pid>10?3:(pid>2?2:1)));
console.log(d.colorPick);
}
});
var node = svg.selectAll(".node")
.data(pack(root).leaves())
.enter().append("g")
.attr("class", "nodeddd")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("id", function(d) { return d.id; })
.attr("r", function(d) {
console.log(d);
return d.r; })
.style("fill",function(d){
if(d.data.color_type == "1"){
//定义一个id为radialGradient_green的径向渐变对象 d3.js 还有一个线性渐变对象，用法类似。。
var defs = svg.append("defs");
var a = d3.rgb(10,15,56,0);
var b = d3.rgb(255,104,0,1); //绿色
// var a = d3.rgb(0,255,0,0);
// var b = d3.rgb(0,255,0,1); //绿色
var radialGradient_green = defs.append("radialGradient")
.attr("id","radialGradient_green")
.attr("x1","0%")
.attr("y1","0%")
.attr("x2","0%")
.attr("y2","0%");
var stop1 = radialGradient_green.append("stop")
.attr("offset","0%")
.style("stop-color",a.toString());
var stop2 = radialGradient_green.append("stop")
.attr("offset","100%")
.style("stop-color",b.toString());
return "url(#" + radialGradient_green.attr("id") + ")" ;
}
else if(d.data.color_type == "2"){
//定义一个id为radialGradient_green的径向渐变对象
var defs = svg.append("defs");
var a = d3.rgb(10,15,56,0);
var b = d3.rgb(255,255,0,1); //绿色
// var a = d3.rgb(0,255,0,0);
// var b = d3.rgb(0,255,0,1); //绿色
var radialGradient_red = defs.append("radialGradient")
.attr("id","radialGradient_red")
.attr("x1","0%")
.attr("y1","0%")
.attr("x2","0%")
.attr("y2","0%");
var stop1 = radialGradient_red.append("stop")
.attr("offset","0%")
.style("stop-color",a.toString());
var stop2 = radialGradient_red.append("stop")
.attr("offset","100%")
.style("stop-color",b.toString());
return "url(#" + radialGradient_red.attr("id") + ")" ;
}
else if(d.data.color_type == "3"){
//定义一个id为radialGradient_green的径向渐变对象
var defs = svg.append("defs");
var a = d3.rgb(10,15,56,0);
var b = d3.rgb(128,216,133,1); //绿色
// var a = d3.rgb(0,255,0,0);
// var b = d3.rgb(0,255,0,1); //绿色
var radialGradient_blue = defs.append("radialGradient")
.attr("id","radialGradient_blue")
.attr("x1","0%")
.attr("y1","0%")
.attr("x2","0%")
.attr("y2","0%");
var stop1 = radialGradient_blue.append("stop")
.attr("offset","0%")
.style("stop-color",a.toString());
var stop2 = radialGradient_blue.append("stop")
.attr("offset","100%")
.style("stop-color",b.toString());
return "url(#" + radialGradient_blue.attr("id") + ")" ;
}
});
//function(d) { return color[d.colorPick];}
//"url(#" + linearGradient.attr("linearColor") + ")"
node.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.id; });
node.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
.selectAll("tspan")
.data(function(d){
var arr = new Array();
arr.push(d.class);
arr.push(d.data.count);
return arr;//圆内显示内容
})
.enter().append("tspan")
.attr("x", 0)
.attr("y", function(d, i, nodes) { return 25 + (i - nodes.length / 2 - 0.5) * 20; })
.text(function(d) { return d; })
.style("fill","#FFF");
node.append("title")
.text(function(d) { return d.id + "\n" + format(d.value); });
node.on("click",function(d){
// clickBubble(d.id);//自定义点击事件
})
}
initCircle(data_1);
</script>
D3.js 的气泡demo
猜你喜欢
转载自www.cnblogs.com/aryu/p/10818367.html
今日推荐
周排行