首先还是先看一张效果图
image.png
思考
- 如何在iOS中实现这样的效果呢
- 首先在iOS中肯定能实现，任何一种语言都可以实现的，今天我们换一中思路，我们使用一种跨平台的语言开发，这样写出来的iOS，Android都可以使用岂不是更好，不用引用别人的第三方库，还可以保证Android，iOS两个系统上显示的效果是一样的，那是什么呢？
- 估计你猜到了对，就是h5,接下来我们看如何实现
具体实现
实现代码
- 引入了两个js.文件，一个是d3.js 一个是jQuery.js 大家都可以自己下载到的
- showMsg 这个方法是点击给一个用户提示的，这是后期自己结合业务添加的
- 上面的那个css 样式很长的是一个loading的样式
- 所有代码有点长，建议复制下载，到本地调试运行
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<head>
<style>
.show_msg{
width:100%;
height:35px;
text-align:center;
position:fixed;
left: 0;
z-index: 999;
}
.show_span{
display: inline-block;
height: 35px;
padding: 0 15px;
line-height: 35px;
background:rgba(0,0,0,0.8);
border-radius: 50px;
color: #fff;
font-size: 1em;
}
*{
padding: 0;
margin: 0;
}
html,body,#main{
width: 100%;
height: 100%;
}
svg {
font: 10px sans-serif;
}
a:hover tspan:first-child {
text-decoration: underline;
}
tspan:last-child,tspan:first-child {
line-height: 15px;
font-size: 13px;
fill-opacity: 0.7;
color: white;
}
#main{
position: relative;
}
#map2{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
svg{
width: 100%;
height: calc(100% - 50px);
box-sizing: border-box;
}
#tools {
height: 50px;
background-color: #F3F4F5;
display: flex;
justify-content: space-around;
align-items: center;
}
.point{
display: block;
width: 8px;
height: 8px;
background-color: #409FFF;
border-radius: 4px;
}
p{
display: flex;
align-items: center;
color: #606266;
font-size: 12px;
}
i{
font-style: normal;
}
</style>
</head>
<body>
<div id="main">
<div id="map2"></div>
<div id="tools">
</div>
<svg id="map"></svg>
</div>
<script src="js/d3.min.js"></script>
<script src="js/jquery.js"></script>
<script >
//点击添加提示
function showMsg(text,position){
var show = $('.show_msg').length
if(show>0){
}else{
var div = $('<div></div>');
div.addClass('show_msg');
var span = $('<span></span>');
span.addClass('show_span');
span.appendTo(div);
span.text(text);
$('body').append(div);
}
$(".show_span").text(text);
if(position=='bottom'){
$(".show_msg").css('bottom','5%');
}else if(position=='center'){
$(".show_msg").css('top','');
$(".show_msg").css('bottom','50%');
}else{
$(".show_msg").css('bottom','95%');
}
$('.show_msg').hide();
$('.show_msg').fadeIn(1000);
$('.show_msg').fadeOut(1000);
}
</script>
<script>
subObj1 = {
"name":"垂直媒体",
"list":[
{
"size":120,
"name":"汽车之家"
},
{
"size":102,
"name":"太平洋"
},
{
"size":87,
"name":"易车网"
},
{
"size":62,
"name":"腾讯汽车"
},
{
"size":62,
"name":"爱卡"
}
]
};
subObj2 = {
"name":"纸媒",
"list":[
{
"size":27,
"name":"传单"
},
{
"size":53,
"name":"报纸"
}
]
};
subObj3 = {
"name":"到店",
"list":[
{
"size":13,
"name":"路过"
},
{
"size":22,
"name":"试驾"
},
{
"size":53,
"name":"自行来店"
}
]
};
subObj4 = {
"name":"电联",
"list":[
{
"size":33,
"name":"电联"
}
]
};
var sourceList = [subObj4,subObj1,subObj2,subObj3];
for(var i=0,len = sourceList.length;i<len;i++){
var obj = sourceList[i];
var total = 0;
for(var j=0,jlen = obj.list.length;j<jlen;j++) {
var jobj = obj.list[j];
total += jobj.size;
}
obj.total = total;
}
console.log(JSON.stringify(sourceList));
function sortNumber(a,b) {
return b.total - a.total;
}
sourceList = sourceList.sort(sortNumber);
console.log(JSON.stringify(sourceList));
var map = document.getElementById("map2");
var svg = d3.select("svg");
width = map.offsetWidth;
height = map.offsetHeight;
// 定义fader函数用来获取颜色,返回颜色字符串
// d3.interpolateCubehelix(a, b)返回a和b之间的颜色插值，0.2是修正gamma值
var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); };
// d3.schemeCategory20.map(fader),将d3.schemeCategory20返回的20个颜色值通过fader函数
// 进行映射转换，最终，生成离散颜色比例尺color函数
var colorlistc = [
"rgb(64, 159, 255)",
"rgb(0, 204, 119)",
"rgb(255, 114, 13)",
"rgb(144, 147, 153)"
]
var colrs = d3.schemeCategory20.map(fader);
colrs = colorlistc.concat(colrs);
color = d3.scaleOrdinal(colrs)
format = d3.format(",d");
//添加tools元素
var tools = document.getElementById('tools');
for(var i=0,len = sourceList.length;i<len;i++){
var obj = sourceList[i];
var node = document.createElement('p');
node.innerHTML = "<p><span class=\"point\" style=\"background-color: "+ colrs[i] +"\"></span><i> "+ obj.name+"</i></p>";
tools.appendChild(node);
}
var alllist = [{"size":0,"path":"d3"}];
for(var i=0,len = sourceList.length;i<len;i++){
var obj = {};
obj.path = "d3/d"+i;
obj.size = 0;
alllist.push(obj);
}
console.log("------=====>");
console.log(JSON.stringify(alllist));
for(var i=0,len = sourceList.length;i<len;i++){
var obj = sourceList[i];
var preobj = alllist[i+1];
for(var j=0,jlen = obj.list.length;j<jlen;j++) {
var jobj = obj.list[j];
jobj.path = preobj.path + "/" + jobj.name + '.js';
alllist.push(jobj);
}
}
console.log("------=====>222");
console.log(JSON.stringify(alllist));
var senddata = alllist;
</script>
<script>
var treemap = d3.treemap()
.size([width, height])
.round(true)
.padding(1);
function loadtree(sendList) {
d3.csv("", function(d) {
console.log(d);
d.size = +d.size;
return d;
}, function(error, data) {
console.log(JSON.stringify(data));
console.log(data);
console.log("======");
if (error) throw error;
data = senddata;
var root = d3.stratify()
.id(function(d) { return d.path; })
.parentId(function(d) { return d.path.substring(0, d.path.lastIndexOf("/")); })
(data)
.sum(function(d) { return d.size; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
console.log("000000>");
console.log(svg.selectAll("a"));
var cell = svg.selectAll("a")
.data(root.leaves())
.enter().append("a")
.attr("target", "_blank")
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
cell.append("rect")
.attr("id", function(d) { return d.id; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.attr("fill", function(d) {
var a = d.ancestors();
console.log(a[a.length - 2].id);
return color(a[a.length - 2].id);
});
var label = cell.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; });
label.append("tspan")
.attr("x", 5)
.attr("y", 15)
.attr("fill", function(d) {
return "rgb(255,255,255)";
})
.text(function(d) {
console.log(d);
return d.data.path.substring(d.data.path.lastIndexOf("/") + 1,
d.data.path.lastIndexOf("."));
});
label.append("tspan")
.attr("x", 5)
.attr("y", 30)
.attr("fill", function(d) {
return "rgb(255,255,255)";
})
.text(function(d) { return format(d.value); });
cell.append("title")
.text(function(d) { return d.id + "\n" + format(d.value); });
$("#map a").each(function(){
$(this).click(function(){
// alert($(this).text());
console.log($(this).text());
var all = $(this).text();
res = all.split("/");
var last = res[res.length-1];
last = last.replace(/.js/g,"");
console.log(res);
showMsg(last,'center');
});
});
});
}
loadtree();
</script>
</body>
总结
- 可以运行了吧，怎么样是要把你自己的数据换一下就可以，很简单拿来就可以使用。
网友评论