代码地址
简单垂直柱状图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linechart</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container"></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="js/index.js"></script>
</body>
</html>
var data = [1,6,4,3,3,8,5,4,3,7],
bar_width = 50,
bar_padding = 10,
width = (bar_width + bar_padding)*data.length,
height = 600;
var scale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([height,0]);
var svg = d3.select("#container")
.append("svg").attr("width",width).attr("height",height)
var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){
return "translate("+i*(bar_width+bar_padding)+",0)";
})
bar.append("rect").attr("y",function(d){return scale(d);})
.attr("width",bar_width)
.attr("height",function(d){return height - scale(d)})
.style("fill","steelblue")
bar.append("text").text(function(d){return d;}).attr("y",function(d){return scale(d+0.1);}).attr("x",bar_width/2)
我们根据实际开发,使用数据文件生成图表
d3.csv("../data.csv",type,function(data){
console.log(data);
var bar_width = 50,
bar_padding = 10,
width = (bar_width + bar_padding)*data.length,
height = 600;
var scale = d3.scaleLinear()
.domain([0,d3.max(data,function(d){return d.population;})])
.range([height,0]);
var svg = d3.select("#container")
.append("svg").attr("width",width).attr("height",height)
var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){
return "translate("+i*(bar_width+bar_padding)+",0)";
})
bar.append("rect")
.attr("y",function(d){return scale(d.population);})
.attr("width",bar_width)
.attr("height",function(d){return height - scale(d.population)})
.style("fill","steelblue")
bar.append("text")
.text(function(d){return d.year;})
.attr("y",function(d){return scale(d.population+0.1);})
.attr("x",bar_width/2)
})
function type(d){
d.population = +d.population;
return d;
}
网格柱状图表
相关d3知识点
柱状图的绘制;
坐标轴的绘制;
D3的轴组件是为D3的quantitative
,time
和ordinal
标度所设计的
d3.svg.axis() //新建一个默认的坐标轴
axis(selection) //轴线适用于selection 或transition 选择器必须包含一个SVG或者g元素
例如:
d3.select("body").append("svg").attr("class","axis").attr("width",1440).attr("heihgt",30).append("g").attr("transform","translate(0,30)").call(axis)
axis.scale([scale])(量度)
//如果scale度量有指定,则设置相应量度并返回轴线。若没有指定, 则返回当前量度默认为线性量度。
axis.orient([orientation])(方向)
//若orientation方向有指定,则设置相应方向并返回。若没有指定,则返回默认方向“bottom”。支持的方向有:
"top" - 横坐标的刻度标注位于轴上方
"bottom" - 横坐标的刻度标注位于轴下方
"left" - 纵坐标的刻度标注位于轴左边
"right" - 纵坐标的刻度标注位于轴右边
如果指定的方向不是以上四个支持的参数之一,则会自动恢复默认值。改变方向只能改变刻度标注和轴路径相关标签的位置,并不能改变轴线本身的位置;而要针对当前区域去改变轴的位置,则可以通过指定相应的g元素的transform属性。
刻度的绘制;
网格线的绘制;
简单的事件;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。