目录
直方图
<html>
<head>
<meta charset="utf-8">
<title>D3通过矩形绘制直方图</title>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
var color = d3.scale.category10();
var dataset =new Array(10);
for (var i=0;i<dataset.length;i++){
dataset[i]=height*Math.random();
}
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>
.attr("width", width) //设定<svg>的宽度属性
.attr("height", height);//设定<svg>的高度属性
//矩形所占的宽度（包括空白），单位为像素
var rectStep =width/dataset.length;
//矩形所占的宽度（不包括空白），单位为像素
var rectWidth =rectStep-10;
var rect = svg.selectAll("rect")
.data(dataset) //绑定数据
.enter() //获取enter部分
.append("rect") //添加rect元素，使其与绑定数组的长度一致
.attr("x", function(d,i){ //设置矩形的x坐标
return i * rectStep;
})
.attr("y", function(d){ //设置矩形的y坐标
return height-d;
})
.attr("fill", function(i){
return color(i);
})
.attr("width",rectWidth) //设置矩形的宽度
.attr("height",function(d){ //设置矩形的高度
return d;
});
var text = svg.selectAll("text")
.data(dataset) //绑定数据
.enter() //获取enter部分
.append("text") //添加text元素，使其与绑定数组的长度一致
.attr("fill","green")
.attr("font-size","24px")
.attr("text-anchor","middle")
.attr("x", function(d,i){
return i * rectStep;
})
.attr("y", function(d){
return height-d-26;
})
.attr("dx",rectWidth/2)
.attr("dy","1em")
.text(function(d){
return Math.floor(d);
});
</script>
</body>
</html>
饼图
<html>
<head>
<meta charset="utf-8">
<title>中国2020年手机市场份额占比</title>
</head>
<body>
<h1 style="text-align:center;">中国2020年手机市场份额占比</h1>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var width = w*0.98;
var height =h*0.96;
var dataset = [["华为",44.1],["苹果",44.0],["小米",4.0],["oppo",2.6],["三星",2.5],["其他",2.9]];
//转化数据为适合生成饼图的对象数组
var pie = d3.pie()
.value(function(d){return d[1];});
innerRadius = 50;//圆环内半径
var arc=d3.arc()//设置弧度的内外半径，等待传入的数据生成弧度
.innerRadius(innerRadius)
.outerRadius(function (d) {
var value=d.value;
return value*5+ innerRadius;
});
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var color = d3.scaleOrdinal(d3.schemeCategory20c);
//准备分组,把每个分组移到图表中心
var arcs=svg.selectAll("g")
.data(pie(dataset))
.enter()
.append("g")
//移到图表中心
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");//translate(a,b)a表示横坐标起点，b表示纵坐标起点
//为组中每个元素绘制弧形路路径
arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
.attr("fill",function(d,i){//填充颜色
return color(i);
})
.attr("d",arc)//将角度转为弧度（d3使用弧度绘制
.on('mouseover',function(d,i){
d3.select(this)
.attr("fill", d3.rgb(color(i)).brighter());
svg.append("text")
.attr("id","info")
.attr("x",width/2)
.attr("y",height/2)
.attr("text-anchor","middle")
.attr("font-size",20)
.text(d.data[0]);
svg.append("text")
.attr("id","value")
.attr("x",width/2)
.attr("y",height/2+24)
.attr("text-anchor","middle")
.attr("font-size",20)
.text(d.value+"%");
})
.on('mouseout',function(d,i){
d3.select(this)
.attr("fill",color(i));
d3.select("#info")
.remove();
d3.select("#value")
.remove();
});
arcs.append("text")
.attr("transform",function(d){
var x = arc.centroid(d)[0];
var y = arc.centroid(d)[1];
return "translate(" + x + "," + y + ")";
})
.attr("text-anchor","middle")
.attr("font-size",function(d) {
return d.data[1]*0.8 + "px";
})
.text(function(d){
return d.value;
});
</script>
</body>
</html>
力导向图
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
《雪中悍刀行》人物关系
</title>
</head>
<body style=" opacity:1">
<h1 style="text-align:center;">《雪中悍刀行》人物关系</h1>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" ></script>
<script type="text/javascript">
var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
var img_h=50;
var img_w=50;
var radius=10;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var nodes=[{name:"徐凤年"},
{name:"徐骁"},
{name:"徐龙象"},
{name:"姜泥"},
{name:"南宫仆射"},
{name:"陈芝豹"},
{name:"李义山"},
{name:"李淳罡"},
{name:"魏叔阳"},
{name:"徐脂虎"},
{name:"王仙芝"},
{name:"洪洗象"},
{name:"韩貂寺"},
{name:"宁峨眉"},
{name:"褚禄山"},
{name:"曹长卿"},
{name:"温华"}];
var edges=[{source:0,target:1},{source:0,target:2},{source:0,target:3},
{source:0,target:4},{source:0,target:7}, {source:0,target:15},
{source:14,target:0},{source:1,target:2},{source:1,target:3},
{source:1,target:6}, {source:1,target:11},{source:1,target:10},
{source:2,target:5}, {source:2,target:3}, {source:2,target:11},
{source:3,target:9},{source:4,target:5},{source:5,target:6},
{source:8,target:11},{source:9,target:11},
{source:10,target:11},{source:10,target:12},{source:13,target:10},
{source:12,target:4},{source:16,target:2},{source:16,target:5}];
var force=d3.layout.force()
.nodes(nodes)
.links(edges)
.size([width,height])
.linkDistance(150)
.charge(-600)
.start();
//绘制
var color=d3.scale.category20();
var lines=svg.selectAll(".forceLine")
.data(edges)
.enter()
.append("line")
.attr("class","forceLine")
.style("stroke","gray")
.style("opacity",0.4)
.style("stroke-width",1);
var circles=svg.selectAll("forceCircle")
.data(nodes)
.enter()
.append("circle")
.attr("class","forceCircle")
.attr("r",function(d,i){return d.weight*2;})
.style("stroke","DarkGray")
.style("stroke-width","1.0px")
.attr("fill",function(d,i){return color(i);})
.call(force.drag);
var texts=svg.selectAll(".forceText")
.data(nodes)
.enter()
.append("text")
.attr("class","forceText")
.attr("x",function(d){return d.x;})
.attr("y",function(d){return d.y;})
.style("stroke", "#336666")
.style("stroke-family","仿宋")
.style("font-size","10px")
.attr("dx","-1.5em")
.attr("dy","1.5em")
.text(function(d){return d.name;});
force.on("tick",function(){
lines.attr("x1",function(d){return d.source.x;});
lines.attr("y1",function(d){return d.source.y;});
lines.attr("x2",function(d){return d.target.x;});
lines.attr("y2",function(d){return d.target.y;});
circles.attr("cx",function(d){return d.x;});
circles.attr("cy",function(d){return d.y;});
texts.attr("x",function(d){return d.x;});
texts.attr("y",function(d){return d.y;});
});
</script>
</body>
</html>
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
